ex-jsでex-navigationを使用すると、ユーザーがナビゲートしたときにタブのStackNavigationをクリアするにはどうすればよいですか？

Question

私はExponentとReact Nativeでex-navigationを使用しています。私は、各タブが内部に独自のStackNavigation要素を持っている複数タブのTabNavigationを持っています。ユーザーがTabNavigationでタブを変更すると、前のタブのスタックをリセットしたいと思います。

popToTopを使用してStackNavigation要素をリセットすることはできますが、ユーザーがタブを変更したときに問題が発生することがあります。送信できるタブ変更イベント、またはルート変更イベントはありますか？

Answer 1

ex-navigationの開発者の助けを借りて、私はナビゲート時にタブスタックをクリアする方法を見つけました。 onPressハンドラをTabNavigationコンポーネントにアタッチすると、デフォルトのイベントハンドラが渡されます。タブを変更するデフォルトのハンドラを呼び出した後、他の任意のアクションを実行できます。我々はstacks("first")を通じて操作するスタックは"first"にidとnavigatorUIDセットの両方を持っている必要があることを

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> 
    ); 
    } 
}; 

注：ここでは、ユーザが任意のタブをクリックすると、最初のタブのスタックをクリアしTabNavigationのバージョンがあります。