为何使用React Context获取setLoading时返回undefined？

核心问题是组件上下文的作用范围不匹配：

• LoadingContext.Provider 定义在 Screen 组件内部，只有 Screen 的子元素（即 {children} 对应的内容）才能访问该上下文。
• 你在 HomeScreen 组件的顶层调用 useContext(LoadingContext)，但此时 HomeScreen 本身并没有被 LoadingContext.Provider 包裹——HomeScreen 是渲染Screen 的组件，而非被 Screen 包裹的组件，自然无法获取上下文值，因此返回 undefined。

方案1：调整嵌套结构，让HomeScreen处于Provider范围内 #

将 HomeScreen 作为 Screen 的子组件，而非让 HomeScreen 自行渲染 Screen。例如在更高层级（如导航配置或App入口）这样使用：

// 示例：App.js 或导航配置文件
import Screen from './path/to/screen';
import HomeScreen from './path/to/HomeScreen';

function App() {
  return (
    <Screen>
      <HomeScreen />
    </Screen>
  );
}

同时修改 HomeScreen 代码，移除内部的 Screen 渲染：

// HomeScreen.js
import { View, Text } from "react-native";
import { LoadingContext } from "../../context";
import { useContext} from "react";

const HomeScreen = ({ navigation }) => {
   const { setLoading } = useContext(LoadingContext);

   console.log(setLoading); // 现在可正常获取函数

   return (
      <View>
            <Text>Home Screen</Text>
            {/* 此处可直接用setLoading控制Modal状态 */}
      </View>
   );
};

export default HomeScreen;

方案2：抽离子组件，让需要上下文的逻辑处于Provider范围内 #

如果必须在 HomeScreen 内部渲染 Screen，可以把需要使用 setLoading 的逻辑抽成子组件，该子组件会被 Screen 的 Provider 包裹：

// HomeScreen.js
import { View, Text } from "react-native";
import { LoadingContext } from "../../context";
import { useContext} from "react";
import Screen from './path/to/screen';

// 抽离的子组件，处于Provider作用范围内
const HomeContent = () => {
  const { setLoading } = useContext(LoadingContext);
  console.log(setLoading); // 正常获取上下文
  return <Text>Home Content</Text>;
};

const HomeScreen = ({ navigation }) => {
   return (
      <Screen>
            <HomeContent />
      </Screen>
   );
};

export default HomeScreen;

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