React-native-router-flux: このプラグインの新機能を提案します。 プロトタイプ「onPress」をシーンに追加できます

作成日 2016年04月20日  ·  3コメント  ·  ソース: aksonov/react-native-router-flux

バージョン

  • react-native-router-flux v3.24.0
  • react-native 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.jsonSelect関数を修正しました。

...
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.jsonSelect関数を修正しました。

...
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 評価