Javascript 使用ex navigation和Exponent js，当用户导航离开时，如何清除选项卡的StackNavigation？

我正在使用ex navigation和Exponent以及React Native。我有一个多选项卡TabNavigation，其中每个选项卡内部都有自己的StackNavigation元素。当用户更改选项卡导航中的选项卡时，我想重置上一个选项卡的堆栈

---

我已经可以使用重置StackNavigation元素，但我的问题是确定用户何时更改选项卡。是否有已发出的选项卡更改事件或路由更改事件可供我订阅？

在获得

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

导出默认类RootNavigation.Component{
建造师（道具）{
超级（道具）；
this.onPress=this.onPress.bind（this）；
}
onPress（开关选项卡）{
开关表（）；
requestIdleCallback（（）=>{
this.props.navigation.performation（（{stacks}）=>{
堆栈（“第一”）.poptoop（）；
});
});
}
render（）{
返回(
);
}
};

请注意，我们通过

堆栈（“first”）

操作的堆栈必须同时将

id

和

navigatorUID

设置为

“first”