React Native跨文件组件共享AuthContext报错求助

这个问题很常见，本质是上下文（Context）的作用域问题——你在App.js里创建了AuthContext，但LoginScreen.js并没有访问到这个变量的途径，所以才会抛出ReferenceError: Can't find variable: AuthContext。下面给你两种可行的解决方法，推荐第一种作为长期方案：

方法一：将AuthContext抽离为单独的共享文件（推荐） #

这是React中共享Context的标准做法，能让任何组件轻松访问，也便于后续维护。

1. 新建AuthContext.js文件
   在项目中创建一个单独的文件（比如和App.js同目录，或者放在contexts文件夹下），内容如下：

import { createContext } from 'react';

// 创建并导出AuthContext
const AuthContext = createContext();

export default AuthContext;

2. 修改App.js，导入并使用共享的AuthContext
   删掉App.js里原本创建AuthContext的代码，换成导入共享文件的内容：

// 导入共享的AuthContext，注意路径要和你的文件位置匹配
import AuthContext from './AuthContext';

// 剩下的useReducer、authContext定义、Provider包裹等代码完全不需要修改
// ... 你的原有代码保持不变

3. 在LoginScreen.js中导入AuthContext
   在LoginScreen的顶部添加导入语句，就能正常使用上下文了：

import AuthContext from './AuthContext'; // 路径要和你的文件位置对应
import { useContext } from 'react';
// ... 其他导入内容

export default function LoginScreen(props) {
  // 现在可以正常获取context里的方法了
  const { signIn } = useContext(AuthContext);
  // ... 组件内的其他代码保持不变
}

方法二：直接从App.js导出AuthContext（临时/小型项目可用） #

如果你的项目很小，不想多建文件，也可以直接在App.js里导出AuthContext：

// App.js里修改：创建后直接导出
export const AuthContext = createContext();

// 其他原有代码完全不变

然后在LoginScreen.js里导入：

import { AuthContext } from './App'; // 从App.js导入命名导出的AuthContext
import { useContext } from 'react';

// ... 组件内使用useContext(AuthContext)即可

为什么推荐方法一？ #

当项目变大，有多个组件（比如RegisterScreen、Home页面的退出按钮等）需要访问AuthContext时，单独的文件能让你避免重复导入App.js，也让上下文的定义更集中，方便后续扩展（比如添加默认值、新增上下文方法等）。

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