Как использовать Ex-Navigation с Exponent JS, как очистить StackNavigation вкладки, когда пользователь уходит?

Question

Я использую экс-навигацию с Exponent и React Native. У меня есть вкладка TabNavigation с несколькими вкладками, где каждая вкладка имеет свой собственный элемент StackNavigation внутри. Когда пользователь меняет вкладки в TabNavigation, я хотел бы сбросить стек предыдущей вкладки.

Я уже могу сбросить элемент StackNavigation с помощью popToTop, но моя проблема заключается в определении того, когда пользователь меняет вкладки. Есть ли у меня событие смены табуляции или событие изменения маршрута, на которое я могу подписаться?

Answer 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") должен иметь как id а также navigatorUID установлен в "first",