React Native路由与认证Context实现报错：checkAuth函数不存在

问题根源分析 #

1. checkAuth is not a function 报错

   • 你在AuthContext.js中将checkAuth定义为AuthProvider组件内部函数，未对外导出，外部import { checkAuth }得到的是undefined，自然不是函数。
   • 你试图通过const { auth } = checkAuth()获取认证状态的方式错误，checkAuth是用于初始化状态的方法，并非返回auth值的函数，正确方式是通过useContext获取Context中的状态。

2. undefined is not an object (evaluating '_react.React.createElement') 报错

   • 核心原因是未正确创建AuthContext实例，代码中缺少const AuthContext = React.createContext();这一行，导致AuthContext.Provider不存在，React无法生成对应元素。

修复后的完整代码 #

1. 修正AuthContext.js

import React, { createContext, useState, useEffect } from 'react';

// 必须创建AuthContext实例
const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useState(null);

  // 内部初始化用的checkAuth，无需导出
  const checkAuth = () => {
    try {
      const authData = globalStorage.getString('accessToken');
      if (authData !== null && authData !== undefined) {
        setAuth(authData);
      }
    } catch (e) {
      console.error(e);
    }
  };

  const removeAuth = () => {
    try {
      globalStorage.remove('accessToken');
      setAuth(null);
    } catch (e) {
      console.error(e);
    }
  };

  const setAuthState = data => {
    try {
      console.log('setAuthState Data: ', data);
      globalStorage.set('accessToken', data);
      setAuth(data);
    } catch (err) {
      console.error(err);
    }
  };

  useEffect(() => {
    checkAuth();
  }, []);

  return (
    <AuthContext.Provider value={{ auth, setAuthState, removeAuth }}>
      {children}
    </AuthContext.Provider>
  );
};

// 导出AuthContext和AuthProvider，无需导出checkAuth
export { AuthContext, AuthProvider };

2. 修正根导航器RootNavigator.js

import React, { useContext } from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { AuthContext } from '../context/AuthContext';
import AuthStack from './AuthStack';
import DrawerStack from './DrawerStack';

const Stack = createStackNavigator();

const RootNavigator = () => {
  // 通过useContext获取认证状态
  const { auth } = useContext(AuthContext);

  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      {/* 根据auth状态自动切换显示的栈 */}
      {auth ? (
        <Stack.Screen name="Drawer" component={DrawerStack} />
      ) : (
        <Stack.Screen name="Auth" component={AuthStack} />
      )}
    </Stack.Navigator>
  );
};

export default RootNavigator;

3. 修正AppNavigation.js

import React from 'react';
import { AuthProvider } from '../context/AuthContext';
import RootNavigator from './RootNavigator';

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

export default AppNavigation;

额外注意事项 #

• 确保globalStorage是正确实现的本地存储工具（如@react-native-async-storage/async-storage），若使用AsyncStorage需替换对应API。
• 登录成功后调用setAuthState传入token，登出时调用removeAuth，auth状态会自动更新，路由随之切换。
• 初始加载时auth为null，会先显示Auth栈，待checkAuth异步获取到token后，自动切换到Drawer栈。

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