React Native 6 基于AuthProvider的身份验证与导航栈切换方案

问题核心原因 #

React Context 的状态只能在 Provider 包裹的子组件树 中访问。你当前的 App 组件是渲染 AuthProvider 的父级组件，本身不在 AuthProvider 的作用域内，因此无法直接在 App 组件内部读取 AuthContext 提供的状态值。

解决方案 #

把导航控制逻辑抽离为独立的子组件，在子组件内访问 AuthContext 的状态即可，这也是全局状态控制路由的标准实现方案。

步骤1 调整App.js导入 #

先导入AuthContext：

import { Provider as AuthProvider, Context as AuthContext } from './context/AuthContext'; 

步骤2 新增独立导航组件 #

新增RootNavigator组件，在该组件内读取AuthContext的token状态判断登录态：

const RootNavigator = () => {
  // 读取AuthContext提供的状态
  const { state } = React.useContext(AuthContext);
  // token存在即判定为已登录
  const isAuth = !!state.token;

  return (
    <NavigationContainer>
      {isAuth ? <MainStackScreens /> : <LoginStackScreens />}
    </NavigationContainer>
  );
};

步骤3 修改App组件 #

调整App组件的返回结构，把导航逻辑替换为刚定义的RootNavigator：

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

优化建议（可选） #

为了避免App启动时读取本地存储token之前闪一下登录页，可以加加载状态处理：

1. 在AuthContext初始状态新增isLoading: true字段
2. 新增从AsyncStorage读取本地token的初始化方法，读取完成后把isLoading设为false
3. 在RootNavigator中判断如果isLoading为true，先渲染加载指示器，加载完成再渲染对应路由

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