React Native应用Google登录后认证状态变更但未自动路由到主页面，邮箱登录正常

看起来你遇到的是Expo Router中认证状态更新后，路由没有自动同步的问题——邮箱登录能正常跳转是因为表单提交后的状态更新刚好触发了布局组件的重渲染，而Google登录的场景下，由于路由栈的特性，单纯依赖isAuthenticated的条件渲染可能不会主动触发页面跳转。我来帮你分析并给出具体的修复方案：

问题核心分析 #

你的RootLayout依赖isAuthenticated状态来决定是否重定向到登录页，但当你在/login页面完成Google登录后，即使isAuthenticated变为true，Expo Router的Redirect组件在初始渲染后，不会自动触发路由切换（因为当前已经处于/login路由下，布局组件的条件渲染不会主动替换已有路由）。而邮箱登录可能因为表单提交后的页面状态刷新逻辑，刚好触发了路由的重新评估。

解决方案1：Google登录成功后手动导航（最可靠） #

直接在登录成功后调用Expo Router的导航函数跳转到主页面，绕开布局组件的重定向依赖，这是最直接的解决方式：

步骤1：修改AuthContext的Google登录函数，返回登录结果

在AuthContext.js的signInWithGoogle中添加返回值，告知调用方登录是否成功：

const signInWithGoogle = async () => {
  if (isSigningIn) return false; // 阻止重复登录
  setIsSigningIn(true);
  try {
    await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
    const userInfo = await GoogleSignin.signIn();
    console.log("Google User Info:", userInfo);
    
    await AsyncStorage.setItem('auth', 'true');
    await AsyncStorage.setItem('googleUser', JSON.stringify(userInfo));
    setIsAuthenticated(true);
    return true; // 登录成功返回true
  } catch (error) {
    console.error('Google Sign-In Error', error);
    return false;
  } finally {
    setIsSigningIn(false);
  }
};

步骤2：在登录页添加手动导航逻辑

假设你的登录页是login.jsx，引入useRouter并在Google登录成功后跳转：

import { View, Button } from 'react-native';
import { useAuth } from '../utils/authContext';
import { useRouter } from 'expo-router';

export default function LoginPage() {
  const { signInWithGoogle } = useAuth();
  const router = useRouter();

  const handleGoogleLogin = async () => {
    const loginSuccess = await signInWithGoogle();
    if (loginSuccess) {
      // 替换当前路由为主页面，避免返回登录页
      router.replace('/(drawer)');
    }
  };

  return (
    <View>
      <Button title="Google登录" onPress={handleGoogleLogin} />
      {/* 你的邮箱登录表单 */}
    </View>
  );
}

解决方案2：优化RootLayout的路由同步逻辑 #

如果你更倾向于依赖认证状态自动同步路由，可以在RootLayout中监听isAuthenticated的变化，手动处理路由跳转：

import { Redirect, Stack, useRouter } from 'expo-router';
import { useAuth } from '../utils/authContext';
import { useEffect } from 'react';

export default function RootLayout() {
  const { isAuthenticated, isLoading } = useAuth();
  const router = useRouter();

  useEffect(() => {
    // 当认证状态变为已登录，且当前在登录页时，跳转到主页面
    if (isAuthenticated && window.location.pathname === '/login') {
      router.replace('/(drawer)');
    }
  }, [isAuthenticated, router]);

  // 加载状态时显示空白或加载组件，避免初始重定向闪烁
  if (isLoading) {
    return null; // 可以替换为你的自定义加载组件
  }

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

  return (
    <Stack screenOptions={{ headerShown: false }}>
      <Stack.Screen name="(drawer)" />
    </Stack>
  );
}

额外注意事项 #

• 确保你的Google Signin配置中webClientId填写了正确的Web客户端ID（从Firebase或Google Cloud Console获取），否则Google登录可能会隐性失败；
• 可以在signInWithGoogle中增加对userInfo的有效性判断，比如检查userInfo.idToken是否存在，避免无效状态下更新认证信息；
• 你的logStorage函数在loadAuthState中是同步调用的，可能导致打印旧的auth值，建议调整为：

const loadAuthState = async () => {
  try {
    // ... 现有逻辑
  } catch (err) {
    // ... 现有逻辑
  } finally {
    setIsLoading(false);
    await logStorage(); // 等待logStorage执行，确保打印最新值
  }
};

内容来源于stack exchange