React导航未定义参数

cvxl0en2  于 2023-02-13  发布在  React
关注(0)|答案(5)|浏览(168)

我尝试将参数传递到一个新屏幕,并像前面提到的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' });

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

dgjrabp2

dgjrabp21#

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

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

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

v1l68za4

v1l68za42#

在我的具体案例中,我调用了一个嵌套的导航器,因此我必须管理如何将这些参数发送到它们的特定屏幕,所以我这样做:
以这种方式发送参数...常规方式:

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 (...)
}
ep6jt1vc

ep6jt1vc3#

不幸的是,我遇到过navigate(route, params, ...)不传递params对象的情况,就像您所做的那样。
作为一种变通方法,我使用了另一个变体-navigate({routeName, params, action, key}),您可以在这里找到它。

frebpwbc

frebpwbc4#

公认的解决方法对我不起作用,所以显然如果使用children呈现组件(在屏幕选项中)并将route作为 prop 传递,它会起作用

k5ifujac

k5ifujac5#

如果您使用的是react navigation v6^,请使用useRoute挂钩访问params对象
const route = useRoute();
useRoute是一个钩子,用于访问route对象,当你不能将route属性直接传递到组件中,或者在子对象嵌套很深的情况下不想传递它时,它会很有用。
下面是它的一个实现

import { useNavigation, useRoute } from '@react-navigation/native';
    import { Pressable, Text } from 'react-native';

    function Screen1() {
      const navigation = useNavigation();

      return (
        <Pressable
          onPress={() => {
            navigation.navigate('Screen2', { caption: 'hey' });
          }}
        >
          <Text> Go to Screen 2 </Text>
        </Pressable>
      );
    }

    function Screen2() {
      const route = useRoute();

      return <Text>{route.params.caption}</Text>;
    }

相关问题