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?
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.
the four methods in the picture do not work even if they have been tried. Both command line startup and Xcode startup report the same error. Use the example from the official home page react-native init AwesomeProject ...