React Native 中嵌套导航器的问题：带有有效负载的“NAVIGATE”操作...未由任何导航器处理

Question

我目前正在使用底部选项卡导航器，其中嵌套有堆栈导航器。

选项卡.tsx：

<NavigationContainer>
  <Tab.Navigator>
    // other screens here
    <Tab.Screen
      name="Stack"
      component={StackNavigator}
     />       
   </Tab.Navigator>
</NavigationContainer>

StackNavigator.tsx：

const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="First"
        component={First}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Second"
        component={Second}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
};

这工作正常，但由于我想在“第二个”屏幕中隐藏 BottomTabNavigator，我将选项卡导航器嵌套在 StackNavigator 中，如文档中所示。

更改后的 Tabs.tsx：

<NavigationContainer>
  <Tab.Navigator>
    // other screens here
    <Tab.Screen
      name="First"
      component={First}
     />       
   </Tab.Navigator>
</NavigationContainer>

更改后的Stack.tsx：

const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Tabs"
        component={Tabs}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Second"
        component={Second}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
};

现在我尝试在“第一个”组件中调用导航函数：

const First = ({ navigation }) => {
return (
 <View style={styles.container}>
  //other elements
  <FAB
        icon="plus"
        style={styles.fab}
        onPress={() => navigation.navigate("Tabs", {screen: "Second"})}
      />
    );
};

但是按下按钮时出现此错误：

The action 'NAVIGATE' with payload {"name":"Tabs","params":{"screen":"Second"}} was not handled by any navigator.

Do you have a screen named 'Tabs'?

因为我在here读到其他人在条件渲染方面遇到了问题，所以我想提一下，我也在使用 AuthStack，它会在用户注销时返回：

AuthStack.tsx：

export default function AuthStack() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen name="Welcome" component={WelcomeScreen} />
        <Stack.Screen name="Sign In" component={LoginScreen} />
        <Stack.Screen name="Sign Up" component={SignUpScreen} />
        <Stack.Screen name="Forgot Password" component={ForgotPasswordScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

index.tsx：

export default function RootNavigation() {
  const { user } = useAuth();

  return user ? <Tabs /> : <AuthStack />;
}

App.tsx：

export default function App() {
  return <RootNavigation />;
}

我做错了什么？

我已经尝试在这篇post中找到解决方案，但我找不到任何解决我的问题的答案。

Answer 1

好吧，您的

<NavigationContainer>

应该位于根级别。您的堆栈需要如下所示：

App.js/tsx

const App = () => {
    return (
        <NavigationContainer>
            <RootNavigator />
        </NavigationContainer>
    )

}

RootNavigator.js/tsx

const stack = CreateNativeStackScreenNavigator() // assuming you're using react-native-screens

const RootNavigator = () => {
    const { user } = useAuth()
    return (
        <Stack.Navigator>
            { user ? 
                <Stack.Screen name={'AuthStack'} component={AuthStack} 
                : <Stack.Screen name={'Tabs'} component={Tabs} }
            <Stack.Screen name={'Second'} component={Second}
        </Stack.Navigator>
    )
}

现在有了这个结构，您可以从 RootNavigator 内的任何子 StackNavigator/TabNavigator/Drawer 导航到 “第二个” 屏幕。