在react-navigation中,routeName和key之间的区别是什么?

时间:2017-02-22 19:51:55

标签: react-native react-navigation ex-navigation

有一点令人困惑的是路由名称和密钥之间的区别以及为什么要使用其中一个与另一个相比。并且,如何处理重复的路由名称。

您使用routeName导航到屏幕的

This documentation sayskey是“用于对路线进行排序的唯一标识符。”这是什么意思?

似乎路由名称不必是唯一的,如我的示例所示,因为外部选项卡和内部堆栈都具有相同的路由名称。当您使用导航功能时 - 您传递路线名称,对吗?如果是这样,它如何区分嵌套导航器中的重复路径名称以及何时使用该键?

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

The documentation有一个设置密钥的示例,但我无法理解它正在尝试做的事情的背景,或者为什么你会在真实用例中这样做。

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)

1 个答案:

答案 0 :(得分:1)

您使用导航器中指定的屏幕名称(例如StackNavigator)来打开/显示屏幕。每个屏幕都有一个唯一的标识符,这是关键。例如。如果你打开两个相同类型的屏幕,它们将具有相同的路由名称,但是具有不同的密钥。

使用this.props.navigation.dispatch(NavigationActions.setParams(params: {val: 'val'}, key: 'home-1'));,您可以使用键'home-1'更新屏幕的导航状态。例如。如果您在主屏幕顶部有StackNavigator和设置屏幕,则可以从设置屏幕更新主屏幕的导航状态(this.props.navigation.state.params)。