Реагировать на навигацию - получить следующее имя экрана для другого навигатора

Question

У меня есть приложение React Native с навигацией React.Я хочу регистрировать имя экрана каждый раз, когда оно меняется.

В моем приложении у меня уже есть несколько stackNavigator и один switchNavigator для их объединения.

Теперь я простодобавлено следующее свойство onTransitionStart ко всем stackNavigator:

export default createStackNavigator(
  {
    ...
  },
  {
    ...
    onTransitionStart: transitionProps => {
      console.log('move to: ', transitionProps.scene.route.routeName);
    },
  },
);

В основном это помогает и делает это так, как я хотел.Тем не менее, это не работает в случаях, когда я перехожу с одного stackNavigator на другой.Где лучше оставить вызов, чтобы узнать, что мы перешли на другой stackNavigator и получить его первый экран?

Answer 1

Для меня помог следующий: createAppContainer создает контейнер со свойством onNavigationStateChange.Он принимает функцию с предыдущим и следующим состоянием навигации в качестве аргументов.У них обоих достаточно данных, чтобы понять, какой экран был предыдущим, а какой будет следующим.Поскольку у меня есть этот контейнер приложения в моем основном компоненте приложения, он выглядит следующим образом:

  <View>
    /* ... */
    <RootNavigator
      /* ... */
      onNavigationStateChange={(prevState, newState, action) => {
        if (action.type === 'Navigation/NAVIGATE' || action.type === 'Navigation/BACK') {
          const currentNavigator = newState.routes[newState.index];
          const screenName = currentRoute.routes[currentNavigator.index].routeName;
          console.log('Current screen is: ', screenName);
      }
    };}
    />
    /* ... */
  </View>

Оба объекта state хранят свойства индекса и маршрутов.Они представляют выбранный индекс stackNavigator и список stackNavigator соответственно.Таким образом, мы можем получить номер выбранного навигатора и получить индекс текущего маршрута для него.

Answer 2

На самом деле вы можете попробовать следующий метод:

import { NavigationEvents } from 'react-navigation';

render() {
  <NavigationEvents 
    onWillFocus={() => {
      console.log('screenA')
    }}
          />
}

Цитируется из документации

NavigationEvents - это компонент React, предоставляющий декларативный API для подписки нанавигационные события.Он будет подписываться на события навигации при монтировании и отменять подписку при размонтировании.