createContext与@react-native-firebase/auth整合异常问题求助

核心问题1：AuthProvider未监听Firebase Auth实时用户状态 #

你的AuthProvider仅在login方法中手动更新user状态，但注册成功后未同步user，且应用初始化时也未读取已登录用户，导致全局始终认为用户未登录。

解决方法：
在AuthProvider中添加auth状态监听，通过onAuthStateChanged实时同步用户状态：

import React, { createContext, useState, useEffect } from "react";
import auth from "@react-native-firebase/auth";
import firestore from "@react-native-firebase/firestore";

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  // 监听Auth状态变化，自动同步用户信息
  useEffect(() => {
    const unsubscribe = auth().onAuthStateChanged((currentUser) => {
      setUser(currentUser);
    });
    // 组件卸载时取消监听
    return unsubscribe;
  }, []);

  return (
    <AuthContext.Provider
      value={{
        user,
        login: async (email, password) => {
          try {
            await auth().signInWithEmailAndPassword(email, password);
            // 无需手动setUser，监听回调会自动更新
          } catch (error) {
            console.error("Login failed:", error);
          }
        },
        register: async (email, password) => {
          try {
            await auth().createUserWithEmailAndPassword(email, password);
            // 注册成功后监听回调自动同步user，直接处理firestore逻辑
            const currentUser = auth().currentUser;
            if (currentUser) {
              await firestore()
                .collection("users")
                .doc(currentUser.uid)
                .set({
                  fname: "",
                  lname: "",
                  email: email,
                  createdAt: firestore.Timestamp.fromDate(new Date()),
                  userImg: null,
                });
            }
          } catch (error) {
            console.log("Something went wrong with sign up: ", error);
          }
        },
        logout: async () => {
          try {
            await auth().signOut();
            // 登出后监听回调自动设置user为null
          } catch (e) {
            console.log(e);
          }
        },
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

核心问题2：RedirectComponent未获取AuthContext中的user #

你的Redirect.js直接使用未定义的user变量，未从全局上下文获取用户状态，导致跳转逻辑完全失效。

解决方法：
修改Redirect.js，通过useContext获取全局user：

import React, { useContext } from "react";
import { Redirect } from "expo-router";
import { AuthContext } from "../src/context/AuthProvider"; // 确认路径正确

const Index = () => {
  const { user } = useContext(AuthContext);

  if (!user) {
    return <Redirect href="/(home)/login" />;
  }

  return <Redirect href="/(tabs)/dashboard" />;
};

export default Index;

核心问题3：重复实例化AuthProvider #

你的index.js和./app/(tabs)/_layout.js都包裹了AuthProvider，导致上下文嵌套，全局状态无法共享。

解决方法：
删除./app/(tabs)/_layout.js中的AuthProvider，仅保留最顶层的全局实例：

// ./app/(tabs)/_layout.js
import React from "react";
import AppRoutes from "./(router)";

const Layout = () => {
  return <AppRoutes />;
};
export default Layout;

关于TextInput的错误 #

RemoteTextInput错误通常是路由频繁跳转导致输入会话中断，解决上述auth状态问题后，路由逻辑会稳定，该错误大概率自动消失。若仍存在，可尝试：

• 确保TextInput所在页面跳转前清理焦点状态
• 避免在输入过程中触发路由跳转

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