我尝试将参数传递到一个新屏幕,并像前面提到的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' });
为什么我的参数在新屏幕中未定义?
5条答案
按热度按时间dgjrabp21#
如果您遇到目标屏幕获得
undefined
参数的情况,可能您有一个嵌套的导航堆栈。这里你必须以这种方式将params传递给navigate方法:
欲了解更多信息,请阅读官方文档中的此页面:
https://reactnavigation.org/docs/nesting-navigators/#navigating-to-a-screen-in-a-nested-navigator
v1l68za42#
在我的具体案例中,我调用了一个嵌套的导航器,因此我必须管理如何将这些参数发送到它们的特定屏幕,所以我这样做:
以这种方式发送参数...常规方式:
然后,从导航器堆栈我这样做:
};
就这样。然后从屏幕上我得到了这样的结果:
ep6jt1vc3#
不幸的是,我遇到过
navigate(route, params, ...)
不传递params
对象的情况,就像您所做的那样。作为一种变通方法,我使用了另一个变体-
navigate({routeName, params, action, key})
,您可以在这里找到它。frebpwbc4#
公认的解决方法对我不起作用,所以显然如果使用
children
呈现组件(在屏幕选项中)并将route
作为 prop 传递,它会起作用k5ifujac5#
如果您使用的是react navigation v6^,请使用
useRoute
挂钩访问params对象const route = useRoute();
useRoute
是一个钩子,用于访问route对象,当你不能将route属性直接传递到组件中,或者在子对象嵌套很深的情况下不想传递它时,它会很有用。下面是它的一个实现