How does ReactNative use react-navigation to confirm which page is currently being displayed?

I have multiple pages linked to the same WebSocket server. When I receive a message, I need to do different processing according to the page being displayed. Does react-navigation have a way to get the page that is currently being displayed?


when you create a navigator using the createStackNavigator (routeConfig, navigatorConfig) method, you have a navigationOptions property in the second parameter object, where you know which page you are currently on.

const StackNavigator = createStackNavigator(
  {
    App: { screen: App },
    Test: { screen: Test },
    Count: { screen: Count },
  },
  {
    headerMode: 'none',             // 
    initialRouteName: 'App',        // 
    initialRouteParams: {           // 
      name: 'Carrie'
    },
    initialRouteKey: 'InitialKey',  // 
    navigationOptions: ({ navigation }) => {
      const routeName = navigation.state.routeName;
      console.log('navigation ', navigation);
      return {
        title: routeName,
      };
    },
    transitionConfig: () => ({
      screenInterpolator: (props) => {
        return StackViewTransitionConfigs.SlideFromRightIOS.screenInterpolator(props);
      },
    }),
  }
);

highlight: navigation.state.routeName
every page that jumps using react-navigation also has a this.props.navigation attribute, just like the content above.

Menu