React Navigation登录状态切换后导航未实时更新求助

你的代码核心问题在于：App组件仅在初始化时从AsyncStorage读取一次登录状态，后续登录/退出操作修改了AsyncStorage，但没有触发App组件的状态更新，导致导航栈无法实时切换。

具体来说：

• App组件的useEffect依赖为空数组，只在组件挂载时执行一次，不会监听AsyncStorage的变化
• Main组件的Exit函数仅修改了全局user对象并保存到AsyncStorage，但没有通知App组件更新isSignedIn状态

通过创建全局Auth Context，统一管理登录状态和状态更新方法，让任何组件都能触发状态变更并实时同步导航栈。

步骤1：创建AuthContext #

新建AuthContext.js文件：

import React, { createContext, useContext, useState, useEffect } from 'react';
import { getData, storeData } from './AsyncStorage/AsyncStorageGetData';
import { user } from './constants'; // 导入你的全局user对象

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [isSignedIn, setIsSignedIn] = useState(false);

  // 初始化时读取登录状态
  useEffect(() => {
    checkAuthStatus();
  }, []);

  // 从AsyncStorage读取登录状态
  const checkAuthStatus = async () => {
    const storedUserData = await getData('userData');
    const storedUserObject = JSON.parse(storedUserData);
    if (storedUserObject !== null) {
      setIsSignedIn(storedUserObject.isLogin);
    }
  };

  // 退出登录方法：更新状态+保存到AsyncStorage
  const signOut = async () => {
    const updatedUserData = { ...user.userData, isLogin: false };
    await storeData('userData', JSON.stringify(updatedUserData));
    setIsSignedIn(false);
  };

  // 登录方法：更新状态+保存到AsyncStorage
  const signIn = async (userData) => {
    const updatedUserData = { ...userData, isLogin: true };
    await storeData('userData', JSON.stringify(updatedUserData));
    setIsSignedIn(true);
  };

  return (
    <AuthContext.Provider value={{ isSignedIn, signIn, signOut }}>
      {children}
    </AuthContext.Provider>
  );
};

// 自定义Hook，简化Context调用
export const useAuth = () => useContext(AuthContext);

步骤2：修改App组件 #

用AuthProvider包裹导航器，并通过useAuth获取登录状态：

import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { AuthProvider, useAuth } from './AuthContext';

import AuthMain from '../screens/Authentication/AuthMain';
import Walkthrough from '../screens/Walkthrough/Walkthrough';
import OTPVerivification from '../screens/Authentication/OTPVerivification';
import OTPRecoveryPassword from '../screens/Authentication/OTPRecoveryPassword';
import UserInformation from '../screens/UserInformation/UserInformation';
import Main from '../screens/Main/Main';

const Stack = createNativeStackNavigator();

// 拆分导航器组件，用于获取Context状态
const AppNavigator = () => {
  const { isSignedIn } = useAuth();

  return (
    <Stack.Navigator>
      {isSignedIn ? (
        <>
          <Stack.Screen
            name="Main"
            component={Main}
            options={{ headerShown: false }}
          />
        </>
      ) : (
        <>
          <Stack.Screen
            name="Walkthrough"
            component={Walkthrough}
            options={{ headerShown: false }}
          />
          <Stack.Screen
            name="AuthMain"
            component={AuthMain}
            options={{ headerShown: false }}
          />
          <Stack.Screen
            name="OTPVerivification"
            component={OTPVerivification}
            options={{ headerShown: false }}
          />
          <Stack.Screen
            name="OTPRecoveryPassword"
            component={OTPRecoveryPassword}
            options={{ headerShown: false }}
          />
          <Stack.Screen
            name="UserInformation"
            component={UserInformation}
            options={{ headerShown: false }}
          />
        </>
      )}
    </Stack.Navigator>
  );
};

const App = () => {
  return (
    <AuthProvider>
      <AppNavigator />
    </AuthProvider>
  );
};

export default App;

步骤3：修改Main组件 #

通过useAuth获取退出登录方法，直接调用即可触发状态更新：

import { View, Text } from 'react-native';
import React from 'react';
import { useAuth } from '../../AuthContext';

import { CustomButton } from '../../components/CustomButton';
import { COLORS, SIZES, images, FONTS, icons } from '../../../constants';

const Main = () => {
  const { signOut } = useAuth();

  return (
    <View style={{ flex: 1, backgroundColor: COLORS.background1 }}>
      <CustomButton text="Выход" onPress={signOut} />
    </View>
  );
};

export default Main;

登录场景补充 #

在登录成功的页面（比如OTPVerivification），同样可以通过useAuth调用signIn方法，实时切换到已登录导航栈：

// 示例：OTPVerivification组件中登录成功后调用
const { signIn } = useAuth();

const handleLoginSuccess = async (userData) => {
  await signIn(userData);
};

内容的提问来源于stack exchange，提问作者Евгений Руденко