3

Exponent と React Native で ex-navigation を使用しています。マルチタブの TabNavigation があり、各タブには独自の StackNavigation 要素が含まれています。ユーザーが TabNavigation でタブを変更したときに、前のタブのスタックをリセットしたいと思います。

popToTopを使用して StackNavigation 要素をリセットすることはできますが、私の問題は、ユーザーがいつタブを変更したかを判断することです。サブスクライブできる発行されたタブ変更イベントまたはルート変更イベントはありますか?

4

1 に答える 1

1

開発者の助けを借りて、ex-navigation移動時にタブ スタックをクリアする方法を見つけました。onPressコンポーネントにハンドラーをアタッチするTabNavigationと、デフォルトのイベント ハンドラーが渡されます。デフォルトのハンドラーを呼び出してタブを変更した後、他の必要なアクションを実行できます。ユーザーがいずれかのタブをクリックすると、最初のタブのスタックをクリアする TabNavigation のバージョンを次に示します。

export default class RootNavigation extends React.Component {
  constructor(props) {
    super(props);
    this.onPress = this.onPress.bind(this);
  }

  onPress(switchTab) {
    switchTab();
    requestIdleCallback(() => {
      this.props.navigation.performAction(({stacks}) => {
        stacks("first").popToTop();
      });
    });
  }

  render() {
    return (
      <View>
        <TabNavigation initialTab="first">
          <TabNavigationItem id="first-tab" onPress={this.onPress}>
            <StackNavigation id="first" navigatorUID="first" initialRoute="first-route" />
          </TabNavigationItem>

          <TabNavigationItem id="second-tab" onPress={this.onPress}>
            <StackNavigation id="second" navigatorUID="second" initialRoute="second-route" />
          </TabNavigationItem>

          <TabNavigationItem id="third-tab" onPress={this.onPress}>
            <StackNavigation id="third" navigatorUID="third" initialRoute="third-route" />
          </TabNavigationItem>
        </TabNavigation>
      </View>
    );
  }
};

操作するスタックには、とstacks("first")の両方が必要であることに注意してください。idnavigatorUID"first"

于 2016-12-07T17:21:25.887 に答える