React Navigation集成Firebase Auth时遇嵌套导航警告求助

你收到的提示核心原因是重复嵌套了<NavigationContainer>。React Navigation要求整个应用只需要一个顶层的NavigationContainer来统一管理导航状态，而你的AuthStack和UnauthedStack里又各自添加了NavigationContainer，导致不必要的嵌套触发了警告。

虽然提示提到可以用independent={true}，但你的场景完全不需要嵌套导航容器，正确做法是移除子栈中的NavigationContainer，同时修正状态变量名不匹配的问题。

具体修改步骤 #

1. 修正AuthStack.js #

移除内部的NavigationContainer，仅保留栈导航器：

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import HomePage from "./HomePage";

const Stack = createNativeStackNavigator();

export default function AuthStack ({navigation}){
    return(
          <Stack.Navigator>
            <Stack.Screen
               name="Home"
               component={HomePage}
               options={{headerShown:false}}>
            </Stack.Screen>
          </Stack.Navigator>
    );
}

2. 修正UnauthedStack.js #

同样移除内部的NavigationContainer：

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import LoginPage from "./LoginPage";
import RegisterPage from "./RegisterPage";

const Stack = createNativeStackNavigator();

export default function UnauthedStack ({navigation}) {
   return (
        <Stack.Navigator initialRouteName="Login">
            <Stack.Screen
               name="Login"
               component={LoginPage}
               options={{headerShown: false}}>
            </Stack.Screen>
            <Stack.Screen
               name="Register"
               component={RegisterPage}
               options={{headerShown: false}}>
            </Stack.Screen>
        </Stack.Navigator>
    );
}

3. 统一状态变量名 #

你的AuthContext里定义的状态是loggedIn，但AppContent里用的是loggedInUser，这会导致登录状态判断失效，需要二选一统一：

方案一：修改AuthContext.js

import React from "react";

const AuthContext = React.createContext();

export const AuthProvider =({children}) => {
    const [loggedInUser, setLoggedInUser] = React.useState(null);

    return (
      <AuthContext.Provider value={{loggedInUser, setLoggedInUser}}>
        {children}
      </AuthContext.Provider>
    );
};

export const useAuth = () => React.useContext(AuthContext);
export default AuthContext;

方案二：修改App.js中的AppContent

const AppContent = () => {
  const { loggedIn } = useAuth();
  return (
    <NavigationContainer>
      {loggedIn ? <AuthStack /> : <UnauthedStack />}
    </NavigationContainer>
  );
};

关于independent={true}的补充 #

如果确实需要嵌套NavigationContainer（比如需要完全独立的导航状态场景），才需要在子容器上添加该属性，示例：

<NavigationContainer independent={true}>
  {/* 独立导航内容 */}
</NavigationContainer>

但你的场景是根据登录状态切换不同栈，仅需一个顶层容器即可，无需使用该属性。

内容的提问来源于stack exchange，提问作者Jowens4954