React Native首次启动后如何判断用户登录状态并跳转路由

问题说明 #

使用Firebase Auth开发React Native应用时，首次启动后无法根据用户登录状态正确跳转路由：已登录用户无法自动进入MainStack抽屉导航，未登录用户无法进入AuthStack登录注册流程，核心原因是首次启动的判断逻辑未结合用户登录状态处理。

解决方案 #

1. 合并首次启动与登录状态判断逻辑

将首次启动的isFirstLaunch判断与用户登录状态user结合，同时优化加载状态，确保Firebase Auth初始化完成后再渲染路由。

2. 修改Routes组件代码

替换原Routes组件为以下代码：

export default function Routes() {
    const { user } = useContext(AuthContext);
    const [isFirstLaunch, setIsFirstLaunch] = useState(null);
    const [authLoaded, setAuthLoaded] = useState(false);

    // 监听Firebase Auth状态，确认Auth初始化完成
    useEffect(() => {
        const subscriber = auth.onAuthStateChanged(() => {
            setAuthLoaded(true);
        });
        return subscriber;
    }, []);

    // 检查首次启动状态
    useEffect(() => {
        AsyncStorage.getItem('alreadyLaunched').then(value => {
            if (value === null) {
                AsyncStorage.setItem('alreadyLaunched', 'true');
                setIsFirstLaunch(true); 
            } else {
                setIsFirstLaunch(false);
            }
        });
    }, []);

    // 等待Auth和首次启动状态加载完成
    if (isFirstLaunch === null || !authLoaded) {
        return null; // 或返回自定义加载组件
    }

    return (
        <NavigationContainer>
            {isFirstLaunch ? (
                // 首次启动：显示引导页+登录注册流程，登录成功后会自动切换到MainStack
                <Stack.Navigator screenOptions={{ headerShown: false }}>
                    <Stack.Screen name='OnBoarding' component={OnBoardingScreen} />
                    <Stack.Screen name="Login" component={LoginScreen} />
                    <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
                    <Stack.Screen name="Registration" component={RegistrationScreen} />
                </Stack.Navigator>
            ) : (
                // 非首次启动：根据登录状态跳转对应栈
                user ? <MainStack /> : <AuthStack />
            )}
        </NavigationContainer>
    );
}

3. 优化AuthProvider（可选）

确保AuthProvider能自动监听Auth状态变化更新用户信息，补充以下代码到AuthProvider中：

// 在AuthProvider组件内添加
useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(setUser);
    return unsubscribe;
}, []);

关键改进点 #

• 等待Firebase Auth初始化完成后再渲染路由，避免user状态为空的错误判断
• 首次启动流程中，用户登录成功后，Firebase Auth的状态变化会自动触发路由切换到MainStack
• 统一NavigationContainer的包裹，避免重复创建实例导致的路由异常

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