使用带有指数JS的前启动，当用户导航时，如何清除选项卡的堆栈范围

Question

我正在使用指数和反应本机的前纳维处理。我有一个多TAB TABNAvigation，每个选项卡都有其自己的堆栈Navigation元素。当用户更改TabNavigation中的选项卡时，我想重置上一个选项卡的堆栈。

我已经可以使用poptopop重置堆栈流动元素，但是我的问题是确定用户何时更改选项卡。我可以订阅吗？

在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")操纵的堆栈必须同时将id和navigatorUID设置为"first"。