反应本机导航嵌套堆栈错误，找不到组件

Question

我试图导航到嵌套堆栈，当我使用 navigation.push(AppRoutes.RescueMeLanding.Name) 时出现错误：

找不到屏幕 'RescueMeStackScreen' 的 'component'、'getComponent' 或 'children' 道具。如果您通过了 'undefined'，就会发生这种情况。您可能忘记从定义组件的文件中导出组件，或者在导入时混淆了默认导入和命名导入。

有什么想法吗？

const AppRoutes = {
  ....
   RescueMeLanding: {
    Name: 'RescueMeStackScreen',
    Label: 'Rescue Me',
    isProtected: true,
  },
....
};

RescueMeStackScreen:

const RescueMeStackScreen = () => {
return (
    <RescueMeStack.Navigator
        initialRouteName={AppRoutes.RescueMeLanding.Name}
    >
        <RescueMeStack.Screen
            name={AppRoutes.RescueMeLanding.Name}
            component={RescueMeLandingScreen}
            options={{ headerShown: false }}
        />
        <RescueMeStack.Screen
            name={AppRoutes.RescueMeMap.Name}
            component={RescueMeScreen}
            options={{ headerShown: false }}
        />
        ;
    </RescueMeStack.Navigator>
);

RootStackNavigator:

const RootStackNavigator = () => {
  return (
    <RootStack.Navigator
      initialRouteName={AppRoutes.LoginRegistration.Name}
      mode="modal"
    >
      ....
      <RootStack.Screen
        name={AppRoutes.RescueMeLanding.Name}
        component={RescueMeStackScreen}
        options={{
          title: AppRoutes.Register.Label,
          headerShown: false,
          animationEnabled: false,
        }}
      />
 ....
    </RootStack.Navigator>
  );

Answer 1

导航到嵌套组件时，需要明确指定父级。

有关详细信息，请参阅 this。

因此，在你的情况下；

navigation.push(AppRoutes.RescueMeLanding, { screen: AppRoutes.RescueMeLanding.Name })

我还建议的是与屏幕不同的名称堆栈。如;

navigation.push(AppRoutes.RescueMeLandingStack, { screen: AppRoutes.RescueMeLanding.Name })

反应本机导航嵌套堆栈错误，找不到组件

React native navigation nested stack error, could not find component

react-navigation