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"}

我的rootStack：

const RootStack = createStackNavigator({
  SomescreenA: { screen: SomescreenA },
  SomescreenB: { screen: SomescreenB },

}, { headerMode: 'none' });

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

Answer 1

如果您遇到目标屏幕获得 undefined 参数的情况，那么您可能有一个嵌套的导航堆栈。

这里你必须以这种方式将参数传递给导航方法：

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

有关更多信息，请阅读官方文档中的此页面：

https://reactnavigation.org/docs/nesting-navigators/#navigating-to-a-screen-in-a-nested-navigator

Answer 2

可接受的解决方案对我不起作用，因此显然，如果您使用children来渲染组件（在屏幕选项中）并通过route作为道具，它将起作用

Answer 3

很不幸，我遇到过navigate(route, params, ...)不会像您一样通过params对象的情况。

作为一种解决方法，我使用了另一个变体-navigate({routeName, params, action, key})，您可以找到here。它总是有效。

Answer 4

在我的特定情况下，我调用了嵌套导航器，因此我必须管理如何将这些参数发送到它们的特定屏幕，所以我这样做了：

以这种方式发送参数...常规方式：

    navigation.navigate(
        'OrderNavigator',
        {itemSelected},
    );

然后，从导航器堆栈中，我这样做了：

const OrderNavigator = ({route: {params}}) => {
return (
    <Stack.Navigator initialRouteName="Order">
        <Stack.Screen name="Order" component={Order} options={{headerShown: false}} initialParams={params} />
    </Stack.Navigator>
);

};

就是这样。然后从屏幕上我得到它们是这样的：

const Order = ({route}) => {
  const {itemSelected} = route.params;
  const {first_name, last_name} = itemSelected;
  return (...)
}

Answer 5

尝试一下，

this.props.route.params?.someParam ?? 'defaultValue';

反应导航未定义的参数

5 个答案: