В реакции-навигации какая разница между routeName и ключом?

Question

Одна вещь, которая немного сбивает с толку, заключается в различии между именем маршрута и ключом и почему вы должны использовать один против другого. И как обрабатываются повторяющиеся имена маршрутов.

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

Это говорит о том, что вы используете routeName для перехода к экрану, и что key это «уникальный идентификатор, используемый для сортировки маршрутов.» Что это значит?

Похоже, что имя маршрута не должно быть уникальным, как показано в моем примере, так как внешняя вкладка и внутренний стек имеют одинаковое имя маршрута. Когда вы используете навигационные функции - вы передаете имя маршрута, правильно? Если да, то как он различает дубликаты имен маршрутов в вложенных навигаторах и когда вы будете использовать ключ вместо этого?

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

В документации есть пример установки ключа, но я не могу понять контекст того, что он пытается сделать, или почему вы могли бы сделать это в режиме реального использования. 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

используется название экрана, указанного в навигаторе (например StackNavigator), чтобы открыть/показать экран. Каждый экран имеет уникальный идентификатор, который является ключом. Например. если вы откроете два экрана одного типа, они будут иметь одно и то же имя маршрута, но другой ключ.

С помощью this.props.navigation.dispatch(NavigationActions.setParams(params: {val: 'val'}, key: 'home-1')); вы можете обновить навигационное состояние экрана клавишей 'home-1'. Например. если у вас есть экран StackNavigator и экран настроек поверх главного экрана, вы можете обновить навигационное состояние (this.props.navigation.state.params) на главном экране с экрана настроек.