response-native получает текущее название маршрута

Question

Это пост "поделись своими знаниями". Мне нужна эта функция, и я искал ее много часов, поэтому я делюсь своим решением. Не стесняйтесь размещать CC.

Как получить имя текущего маршрута из основного приложения в реагировать родной?

РЕДАКТИРОВАТЬ: ЭТО ДЛЯ РЕАКЦИИ-навигации V1

(зная, что мы не можем использовать this.props.navigation внутри него, потому что он определяет TabNavigator и сам StackNavigator)

/** the trick is with DeviceEventEmitter **/
import { DeviceEventEmitter } from 'react-native';
const initialRouteName = "FluxObservations";


const MyTabView = TabNavigator(
  {
    FluxObservations: { screen: FluxObservations },
    Projects: { screen: Projects },
    NewObservation: { screen: NewObservation},
    Explorer: { screen: Explorer },
    Profil: { screen: Profil }
  },
  {
    swipeEnabled: false,
    initialRouteName: initialRouteName,
    tabBarPosition: "bottom",
    tabBarOptions: { ... },
    navigationOptions: {
      tabBarOnPress: ({ previousScene, scene, jumpToIndex }) => {
        //On each tab change we inject event
        DeviceEventEmitter.emit('updateCurrentRouteName', { currentRouteName: scene.route.routeName });
        // Keep original behaviour
        jumpToIndex(scene.index)
      }
    }
  }
);

const StackView = StackNavigator(
  {
    global: {
      screen: MyTabView,
      headerMode: "none",
      header: null,
      navigationOptions: {
        header: null
      }
    },     
    Credits: { screen: Credits },
    Floristic: { screen: Floristic },
    TermsOfUse: { screen: TermsOfUse },
    LegalNotice: { screen: LegalNotice },
    Options: { screen: Options },
  },
  {mode: 'modal'}
);

export default class App extends React.PureComponent {
  constructor (props) {
    super(props);
    // emit the event for the first tab opened by default, initialRouteName
    DeviceEventEmitter.emit('updateCurrentRouteName', { currentRouteName: initialRouteName });
  }


  // catching all event for route name change ! 
  listeners = {
    update: DeviceEventEmitter.addListener('updateCurrentRouteName', ({ ...currentRouteName }) => {
      console.log("MAIN ", currentRouteName) // Perform update
    })
  }


  render() {
    return (
      <Provider store={store}>
        <PersistGate
          loading={<ActivityIndicator />}
          persistor={persistor}>
          <View style={styles.fullScreen}>
            <StackView />
          </View>
        </PersistGate>
      </Provider>
    );
  }
}

Мне нужно, чтобы этот модал показывался на каждом экране TabNavigator каждый раз, когда пользователь нажимал на них (пока он не нажимал «я понял»)

Answer 1

Используйте метод отслеживания сцены подробно здесь , в официальных документах

function getActiveRouteName(navigationState) {
  if (!navigationState) {
    return null;
  }
  const route = navigationState.routes[navigationState.index];
  // dive into nested navigators
  if (route.routes) {
    return getActiveRouteName(route);
  }
  return route.routeName;
} 

<StackView
  onNavigationStateChange={(prevState, currentState) => {
    const currentScreen = getActiveRouteName(currentState);
    console.log("currentScreen  : " + currentScreen);  
  }}
/>