In a navigation reaction, what is the difference between routeName and a key?

Question

One thing that is a little confusing is the difference between the route name and the key and why you should use one against the other. And how are duplicate route names handled.

https://reactnavigation.org/docs/navigators/navigation-prop

This suggests that you are using routeName to navigate to the screen and that key is "a unique identifier used to sort routes." What does it mean?

It seems that the route name should not be unique, as shown in my example, since the outer tab and inner stack have the same route name. When you use navigation functions - you pass the name of the route, right? If so, how does it distinguish duplicate route names in nested navigators and when do you use the key instead?

  export TabsNavigator = TabNavigator({ Home: { screen:StackNavigator({ Home: { screen: HomeScreen }, }), }, Profile: { screen: StackNavigator({ Profile: { ProfileScreen }, }), }, }); 

The documentation has an example of setting a key, but I cannot understand the context of what it is trying to do, or why you would do it in real use. https://reactnavigation.org/docs/navigators/navigation-prop

 import { NavigationActions } from 'react-navigation' const setParamsAction = NavigationActions.setParams({ params: {}, // these are the new params that will be merged into the existing route params // The key of the route that should get the new params key: 'screen-123', }) this.props.navigation.dispatch(setParamsAction) 

Answer 1

You use the name of the screen specified in the Navigator (for example, StackNavigator ) to open / display the screen. Each screen has a unique identifier, which is the key. For example. if you open two screens of the same type, they will have the same route name, but a different key.

Using this.props.navigation.dispatch(NavigationActions.setParams(params: {val: 'val'}, key: 'home-1')); You can update the screen navigation state with the 'home-1' key. For example. if you have a StackNavigator screen and a settings screen on top of the main screen, you can update the navigation status ( this.props.navigation.state.params ) on the main screen from the settings screen.