如何在 React Native 中实现登录状态驱动的动态导航切换-js教程-PHP中文网

如何在 React Native 中实现登录状态驱动的动态导航切换

本文介绍如何通过 React Context 管理全局认证状态，并让 React Navigation 根据 isLoggedIn 实时响应式切换路由，解决状态更新后界面不重渲染、需重启应用才能生效的问题。

本文介绍如何通过 react context 管理全局认证状态，并让 react navigation 根据 `isloggedin` 实时响应式切换路由，解决状态更新后界面不重渲染、需重启应用才能生效的问题。

在 React Native 中，仅使用局部 useState 管理导航状态（如 isSignedIn）会导致状态变更无法触发导航器重新渲染——因为 Stack.Navigator 本身并不订阅组件内部状态变化，且 useEffect 的依赖数组若错误地包含 isSignedIn（如原代码中注释的 // Зависимость от isSignedIn），还会引发无限循环或状态捕获失效（stale closure）问题。

正确的解法是：将认证状态提升至全局上下文（Context），使所有相关组件（包括导航配置）能统一订阅并响应其变化。以下是完整、可落地的实现方案：

✅ 步骤一：创建认证上下文（AuthContext）

// src/navigation/AuthContext.tsx
import React, {createContext, useContext, useState} from 'react';

export const AuthContext = createContext void;
}>({
  isLoggedIn: false,
  setLoginStatus: () => {},
});

export const AuthProvider = ({children}: {children: React.ReactNode}) => {
  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);

  const setLoginStatus = (status: boolean) => {
    setIsLoggedIn(status);
  };

  return (
    <authcontext.provider value="{{isLoggedIn," setloginstatus>
      {children}
    </authcontext.provider>
  );
};

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};</boolean>

⚠️ 注意：AuthContext 必须在 NavigationContainer 外部提供，确保其生命周期覆盖整个导航栈；同时避免在 AuthProvider 内部直接渲染 <navigationcontainer></navigationcontainer>，否则会破坏状态同步。

react-pro
你是一位 React 专家，擅长高级 Hook、性能优化、状态管理和现代 React 模式。适用场景：高级 Hook 模式...

下载

✅ 步骤二：在根组件中包裹 `AuthProvider`

// App.tsx
import React from 'react';
import {AuthProvider} from './src/navigation/AuthContext';
import Navigation from './src/navigation';

const App = () => {
  return (
    <authprovider><navigation></navigation></authprovider>
  );
};

export default App;

✅ 步骤三：重构导航组件，消费上下文并支持异步初始化

// src/navigation/index.tsx
import React, {useEffect, useState} from 'react';
import {View, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {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';
import {getData} from '../AsyncStorage/AsyncStorageGetData';
import {FONTS} from '../../constants';

const Stack = createNativeStackNavigator();

const AppNavigator = () => {
  const {isLoggedIn, setLoginStatus} = useAuth();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const initAuth = async () => {
      try {
        const storedUserData = await getData('userData');
        const userObj = storedUserData ? JSON.parse(storedUserData) : null;
        setLoginStatus(!!userObj?.isLogin); // 安全处理 null/undefined
      } catch (err) {
        console.warn('Failed to load auth state:', err);
        setLoginStatus(false);
      } finally {
        setLoading(false);
      }
    };
    initAuth();
  }, [setLoginStatus]);

  if (loading) {
    return (
      <view style="{{flex:" justifycontent: alignitems:><text style="{FONTS.h1}">Загрузка...</text></view>
    );
  }

  return (
    <navigationcontainer><stack.navigator screenoptions="{{headerShown:" false>
        {isLoggedIn ? (
          <stack.screen name="Main" component="{Main}"></stack.screen>
        ) : (
          
            <stack.screen name="Walkthrough" component="{Walkthrough}"></stack.screen><stack.screen name="AuthMain" component="{AuthMain}"></stack.screen><stack.screen name="OTPVerivification" component="{OTPVerivification}"></stack.screen><stack.screen name="OTPRecoveryPassword" component="{OTPRecoveryPassword}"></stack.screen><stack.screen name="UserInformation" component="{UserInformation}"></stack.screen>
          >
        )}
      </stack.navigator></navigationcontainer>
  );
};

export default AppNavigator;

✅ 步骤四：在业务组件中安全更新状态（例如退出登录）

// src/screens/Main/Main.tsx
import React from 'react';
import {View, Text} from 'react-native';
import {CustomButton} from '../../components/CustomButton';
import {storeData} from '../../AsyncStorage/AsyncStorageGetData';
import {useAuth} from '../../navigation/AuthContext'; // ✅ 引入 hook
import {user} from '../../../constants';

const Main = () => {
  const {setLoginStatus} = useAuth(); // ✅ 直接获取更新函数

  const handleLogout = async () => {
    try {
      user.userData.isLogin = false;
      await storeData('userData', JSON.stringify(user.userData));
      setLoginStatus(false); // ✅ 立即触发导航重渲染
    } catch (err) {
      console.error('Logout failed:', err);
    }
  };

  return (
    <view style="{{flex:" backgroundcolor:><custombutton text="Выход" onpress="{handleLogout}"></custombutton></view>
  );
};

export default Main;