在嵌套导航器内导航时未定义 route.params?
2020-07-24
2494
我正在使用 React Native 和 React Navigation。我试图只将其中一个屏幕设为
mode="Modal
,但导航时传递的路由参数显示“未定义”,错误为
TypeError: undefined is not an object (evaluating 'route.params.title')
。这是为什么?我该如何修复?
我的尝试
const ModalScreen = () => (
<Modals.Navigator mode="modal">
<Modals.Screen
name="Modal"
component={Modal}
options={({ route }) => ({
title: route.params.title,
headerTransparent: true,
gestureResponseDistance: {
vertical: 500,
},
})}
/>
</Modals.Navigator>
);
const MainScreen = () => (
<Items.Navigator>
<Items.Screen
name="Main"
component={Main}
options={{ headerShown: false }}
/>
<Items.Screen name="Modal" component={ModalScreen} />
</Items.Navigator>
);
// Navigating to Modal in another file.
<TouchableOpacity
onPress={() =>
navigation.navigate("Modal", {
screen: "Modal",
title: title,
})
}
>
2个回答
当您向嵌套导航器发送参数时,您必须像下面这样发送
navigation.navigate('Modal', {
screen: 'Modal',
params: { title: 'title' },
})
键 params 指定它是一个参数,您可以像访问任何其他参数一样访问它。
Guruparan Giritharan
2020-07-24
它不起作用的原因是因为您的参数位于父堆栈上,而不是位于路由本身上,因为您从一个堆栈导航到另一个堆栈
react navigation 提供了一个 dangerouslyGetParent 方法来解决这个问题 react navigation docs
Walter Shub
2020-07-24