使用Expo Stack配置ContextProvider时用户对象不更新问题

我尝试用 AppWrapper 包裹 RootStack 以访问 AuthContext 中的用户对象，但用户对象无法像原生裸项目那样正常更新。想请教我的写法是否存在问题？

我的代码 #

main _layout 文件 #

import { useEffect } from 'react'
import { Slot, Stack } from 'expo-router';
import 'react-native-reanimated';
import AuthContextProvider from '@/contexts/AuthContext';

import AppWrapper from '@/components/layout/AppWrapper';

export default function RootLayout() {
  return (
    <AuthContextProvider>
      <AppWrapper>
        <Slot />
      </AppWrapper>
    </AuthContextProvider>
  );
}

AppWrapper 组件 #

import React from 'react'
import { Redirect, SplashScreen, Stack } from 'expo-router';
import { ThemeProvider } from '@react-navigation/native';
import { DefaultTheme, DefaultDarkTheme } from '@/styles/theme';

import { useAuth } from '@/contexts/AuthContext';
import { useColorScheme } from '@/hooks/useColorScheme';
import { colors } from '@/styles/colorPalette';

// 在资源加载完成前阻止启动页自动隐藏。
SplashScreen.preventAutoHideAsync()

export default function AppWrapper({children}: {children: React.ReactNode | React.ReactNode[]}) {
  const darkMode = useColorScheme() === 'dark';
  const loaded = useAuth().loaded
  const user = useAuth().user

  console.log("user object in wrapper is: ", user)

  if (!!loaded) {
    SplashScreen.hideAsync()
  }

  return (
    <ThemeProvider
      value={darkMode ? DefaultDarkTheme : DefaultTheme}
    >
      { loaded ?
        <Stack
          screenOptions={{
            contentStyle: {
              backgroundColor: darkMode ? colors.background.darkBg : colors.background.lightBg
            },
            headerShown: false
          }}
        >
          { !!user ?
            <Stack.Screen name="(tabs)" />
          :
            <>
              <Stack.Screen name="login" options={{animation: 'fade'}} />
              <Stack.Screen name="redirect" options={{animation: 'fade'}}/>
            </>
          }
        </Stack>
      : null} 
    </ThemeProvider>
  )
}

问题分析 #

你的写法存在几个关键问题，导致用户对象更新无法触发组件重渲染和路由更新：

1. Expo Router 路由机制冲突
   Expo Router 基于文件系统路由工作，你在 AppWrapper 中手动声明 <Stack.Screen> 的同时，RootLayout 里又保留了 <Slot />，这会让路由逻辑混乱。手动指定 Screen 会覆盖 Expo Router 的默认路由解析，而 <Slot /> 是用来渲染子路由的，两者叠加会导致状态更新后路由无法重新计算，自然看不到用户对象变化后的页面跳转。

2. AuthContext 状态响应性检查缺失
   如果你的 AuthContext 内部没有用 useState/useReducer 正确管理 user 和 loaded 状态，或者更新状态时没有调用 setState 方法，AppWrapper 就无法感知到状态变化，也就不会重渲染。

3. SplashScreen 调用时机不规范
   SplashScreen.preventAutoHideAsync() 放在组件外部，会在组件挂载前执行，但如果 AuthContext 的加载是异步的，可能导致 SplashScreen 隐藏时机不符合预期，不过这和用户对象更新无关，但属于潜在问题。

修复方案 #

1. 调整路由结构，移除手动路由声明 #

把路由的条件判断从 AppWrapper 中移出，交给页面级别处理，保留 AppWrapper 作为主题和启动屏的处理层：

修改后的 AppWrapper：

import React, { useEffect } from 'react'
import { SplashScreen } from 'expo-router';
import { ThemeProvider } from '@react-navigation/native';
import { DefaultTheme, DefaultDarkTheme } from '@/styles/theme';

import { useAuth } from '@/contexts/AuthContext';
import { useColorScheme } from '@/hooks/useColorScheme';
import { colors } from '@/styles/colorPalette';

export default function AppWrapper({children}: {children: React.ReactNode | React.ReactNode[]}) {
  const darkMode = useColorScheme() === 'dark';
  const { loaded } = useAuth()

  // 用 useEffect 监听 loaded 状态变化，控制启动屏隐藏
  useEffect(() => {
    const hideSplash = async () => {
      if (loaded) await SplashScreen.hideAsync();
    };
    hideSplash();
  }, [loaded])

  // 加载未完成时不渲染内容
  if (!loaded) return null;

  return (
    <ThemeProvider value={darkMode ? DefaultDarkTheme : DefaultTheme}>
      <div style={{
        backgroundColor: darkMode ? colors.background.darkBg : colors.background.lightBg,
        flex: 1
      }}>
        {children}
      </div>
    </ThemeProvider>
  )
}

2. 确保 AuthContext 状态是响应式的 #

检查你的 AuthContext 实现，确保用 useState 管理状态，示例如下：

// @/contexts/AuthContext.js
import { createContext, useContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const AuthContext = createContext();

export function AuthContextProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loaded, setLoaded] = useState(false);

  // 异步检查登录状态（替换成你的实际逻辑）
  useEffect(() => {
    const checkAuthStatus = async () => {
      const savedUser = await AsyncStorage.getItem('user');
      if (savedUser) setUser(JSON.parse(savedUser));
      setLoaded(true);
    };
    checkAuthStatus();
  }, []);

  // 提供更新用户状态的方法
  const updateUser = (newUser) => {
    setUser(newUser);
    AsyncStorage.setItem('user', JSON.stringify(newUser));
  };

  return (
    <AuthContext.Provider value={{ user, updateUser, loaded }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

3. 在页面级别处理路由重定向 #

在需要权限的页面布局中检查用户状态，比如 (tabs)/_layout.js：

import { Redirect, Stack } from 'expo-router';
import { useAuth } from '@/contexts/AuthContext';

export default function TabsLayout() {
  const { user } = useAuth();

  // 未登录则重定向到登录页
  if (!user) return <Redirect href="/login" />;

  return (
    <Stack>
      {/* 你的 Tab 配置 */}
    </Stack>
  );
}

在登录页 login.js 中检查已登录状态：

import { Redirect } from 'expo-router';
import { useAuth } from '@/contexts/AuthContext';

export default function LoginScreen() {
  const { user } = useAuth();

  // 已登录则重定向到主页
  if (user) return <Redirect href="/(tabs)" />;

  // 登录表单逻辑
  return (
    {/* 你的登录界面 */}
  );
}

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