React Native登录状态检测方法、firebase登录异常解决及学习资源咨询

你当前的写法存在两个核心问题：

1. isLogin 是普通全局变量，仅在代码初始化时读取一次Firebase的当前用户状态，不属于React响应式状态，登录状态发生变化时变量不会自动更新，也不会触发组件重新渲染，因此登录后还是初始的false值。
2. Firebase的用户认证状态初始化是异步过程，代码首次执行时currentUser大概率还未完成加载，初始值本身就会是null。

通过React内置的useState存储登录状态，配合Firebase提供的onAuthStateChanged事件监听认证状态变化，登录、登出操作触发后会自动更新状态并刷新导航。
修改后的核心代码如下：

import { useState, useEffect } from 'react';
// 此处替换为你项目中firebase的实际导入语句
import firebase from 'firebase/app';
import 'firebase/auth';

// HomeStack、LoginStack代码保持原有逻辑即可
const HomeStack = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyled: {
          backgroundColor: primary,
        },
        headerLeftContainerStyle: {
          paddingLeft: 20,
        },
        headerShown: false,
      }}
      initialRouteName="Home"
    >
      <Stack.Screen name="HomeScreen" component={Home} />
      <Stack.Screen name="Login" component={Login} />
    </Stack.Navigator>
  );
};

const LoginStack = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyled: {
          backgroundColor: primary,
        },
        headerLeftContainerStyle: {
          paddingLeft: 20,
        },
        headerShown: false,
      }}
      initialRouteName="Login"
    >
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Signup" component={Signup} />
    </Stack.Navigator>
  );
};

const RootStack = () => {
  // 存储登录状态
  const [isLogin, setIsLogin] = useState(false);
  // 存储Firebase认证初始化状态，避免初始加载时闪登录页
  const [authLoading, setAuthLoading] = useState(true);

  useEffect(() => {
    // 监听认证状态变化，登录、登出都会触发该回调
    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
      setIsLogin(!!user);
      setAuthLoading(false);
    });
    // 组件卸载时取消监听，避免内存泄漏
    return unsubscribe;
  }, []);

  // 认证加载中可以返回自定义加载组件
  if (authLoading) {
    return <LoadingView />;
  }

  return (
    <NavigationContainer>
      {isLogin ? (
        <Drawer.Navigator>
          <Drawer.Screen name="Home" component={HomeStack} />
          <Drawer.Screen name="Chat" component={Chat} />
        </Drawer.Navigator>
      ) : (
        <LoginStack />
      )}
    </NavigationContainer>
  );
};

export default RootStack;

补充说明：登录/注册逻辑执行成功后不需要手动跳转页面，isLogin状态更新后会自动渲染抽屉导航，建议把原LoginStack里的Home页面移除，避免未登录用户直接访问到受保护的页面。

• 官方文档：优先阅读React Native官方中文文档，所有基础组件、API、开发规范都有最权威的说明，新手入门建议先完整过一遍基础教程部分，能少走很多弯路。
• 实战教程：选择社区口碑较好的RN全栈实战课程，跟着教程从环境搭建开始，一步步完成从简单Demo到完整上线项目的开发，快速掌握导航、状态管理、第三方库调用、打包上线等全流程技能。
• 社区资源：国内的React Native技术交流板块、GitHub相关开源项目的issue区，遇到问题优先搜索相关讨论，大部分常见兼容性、性能问题都有现成的解决方案，也可以参考其他开发者分享的实战踩坑指南。
• 开源项目参考：GitHub上有很多高质量的React Native开源项目，可以克隆到本地运行调试，学习成熟项目的代码结构、业务封装逻辑。

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