如何使用 React Navigation 将参数传递给嵌套导航器答案

【问题标题】：how to pass params to nested navigators using React Navigation如何使用 React Navigation 将参数传递给嵌套导航器
【发布时间】：2021-12-02 04:29:22
【问题描述】：

无法将参数传递给嵌套导航器。我不断收到错误 undefined is not an object evaluation route.params.data

对于 homeDrawer 和 LiveModeDrawer，我确实有不同的堆栈导航器。我正在使用 React 导航版本 6。我查看了文档，但是我阅读的内容不起作用。

app.js

<Drawer.Navigator>
  <Drawer.Screen
    name="HomeDrawer"
    options={{ headerShown: false }}
    component={MainNavigator}
  />
  <Drawer.Screen
    name="LiveModeDrawer"
    options={{ headerShown: false }}
    component={LiveModeStackNavigator}
  />
</Drawer.Navigator>;

todo.js

this.props.navigation.navigate("LiveModeDrawer", {
  screen: "LiveModeAlertOnly",
  params: { data: "jane" },
});

live.js

export default function LiveModeAlertsNotifications({ route, navigation }) {
  const { data } = route.params;
  console.info(data);
}

【问题讨论】：

标签： react-native react-navigation react-navigation-stack react-navigation-drawer

【解决方案1】：

AFAIK 第二个参数已经是参数

改变这个：

this.props.navigation.navigate('LiveModeDrawer', {
        screen: 'LiveModeAlertOnly',
        params: {data: 'jane'},
      });

收件人：

this.props.navigation.navigate('LiveModeDrawer', {
       data: 'jane,
      });

或者：

export default function LiveModeAlertsNotifications({route, navigation}) {
   const {data} = route.params.params; // Add another params
   console.info(data)

【讨论】：

仍然不适合我。

【解决方案2】：

我忘记将 prop 传递给子组件

【讨论】：