ReactNative使用react-navigation如何确认当前正在显示的是哪个页面？

Question

我有多个页面链接到同一个WebSocket服务器，当收到消息的时候需要根据正在显示的页面做不同的处理，请问react-navigation有没有获取当前正在显示的是页面的方法？

Answer 1

在使用createStackNavigator(routeConfig, navigatorConfig)方法创建导航器时，在第二个参数对象中有一个navigationOptions属性，在这里可以知道当前是在哪个页面。

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

划重点：navigation.state.routeName
使用react-navigation跳转的每个页面也都有一个this.props.navigation属性，和上面的内容一样。