React-native-router-flux: 建议此插件的新功能。 可以将原型“onPress”添加到场景中

创建于 2016-04-20  ·  3评论  ·  资料来源: aksonov/react-native-router-flux

版本

  • react-native-router-flux v3.24.0
  • 反应原生 v0.24.0

    新功能

我想向选项卡添加一个操作,例如:
<Scene key="main" tabs={true} ...> <Scene key="AAAA" component={AAAPage} .../> <Scene key="Button" onPress={()=> ... } .../> <Scene key="CCCC" component={CCCPage} .../> </Scene>
场景“按钮”可以添加 onPress 原型来绑定动作。

最有用的评论

修复 react-native-router-flux/src/TabBar.js onSelect 函数。

...
export default class extends Component {
    onSelect(el){
        const state = this.props.navigationState;
        if (!Actions[el.props.name]){
            throw new Error("No action is defined for name="+el.props.name+" actions:"+JSON.stringify(Object.keys(Actions)));
        }

        // rewrite Actions[el.props.name]();
        if (!el.props.modal) {
            Actions[el.props.name]();
        }
        else {
          el.props.onPress();
        }
    }

...

反应本机文件如下所示:

        <Scene key="main" tabs={true}>
            ...
            <Scene key="OtherPage" component={OtherPageModal} modal={true} onPress={()=>alert("Test")} ... />
            ...
        </Scene>

所有3条评论

IMO 这超出了该项目的范围。 这是一个导航堆栈。

此外,添加此新功能可能会严重中断来自下游组件的 onPress 调用,或者可能会在复杂视图中引入延迟; 例如使用 ListView 的视图

您只需在每个页面的顶部视图中添加 onPress 即可完成此操作。

修复 react-native-router-flux/src/TabBar.js onSelect 函数。

...
export default class extends Component {
    onSelect(el){
        const state = this.props.navigationState;
        if (!Actions[el.props.name]){
            throw new Error("No action is defined for name="+el.props.name+" actions:"+JSON.stringify(Object.keys(Actions)));
        }

        // rewrite Actions[el.props.name]();
        if (!el.props.modal) {
            Actions[el.props.name]();
        }
        else {
          el.props.onPress();
        }
    }

...

反应本机文件如下所示:

        <Scene key="main" tabs={true}>
            ...
            <Scene key="OtherPage" component={OtherPageModal} modal={true} onPress={()=>alert("Test")} ... />
            ...
        </Scene>

完美的!!!

此页面是否有帮助?
0 / 5 - 0 等级