react-native 获取当前路由名称

Question

这是一篇“分享你的知识”的帖子。我需要这个功能并搜索了很多小时，所以我分享了我的解决方案。随意发帖抄送。

react native如何从主App获取当前路由名称？

编辑：这是针对 react-navigation 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

使用场景追踪方法detailed here，在官方文档中

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