react-native - react 导航未定义的参数

Question

我正在尝试将参数传递到一个新屏幕，并像前面提到的那样实现它 here .

我有以下 TouchableOpacity按钮。

<TouchableOpacity
  onPress={() => {
    this.props.navigation.navigate('SomeScreen', {
      title: 'Title',
      subTitle: 'Subtitle',
    });
  }}
>

在另一个页面上(我们称之为 Somescreen)，我有以下内容:

render() {
  const { navigation } = this.props;
  const title = navigation.getParam('title');
}

但是 title以上是未定义的:

{ params: undefined, routeName: "Somescreen", key: "id-xx" }

我的根堆栈:

const RootStack = createStackNavigator({
  SomescreenA: { screen: SomescreenA },
  SomescreenB: { screen: SomescreenB },
}, { headerMode: 'none' });

为什么我的参数在新屏幕中未定义？

Answer 1

如果您遇到目标屏幕显示 undefined 的情况params，可能你有一个嵌套的导航堆栈。
在这里，您必须以这种方式将参数传递给导航方法:

navigation.navigate('Root', {
  screen: 'Settings',
  params: { user: 'jane' },
});

有关更多信息，请阅读官方文档中的此页面:
https://reactnavigation.org/docs/nesting-navigators/#navigating-to-a-screen-in-a-nested-navigator