React Native中如何为指定屏幕应用useContext？

你的写法不生效的核心原因是：React Navigation的Stack.Navigator仅接受Stack.Screen或Stack.Group作为直接子元素，你把UserContext.Provider包裹在多个Stack.Screen外层，并不会让这些Screen的组件处于上下文的作用域内——导航器会独立渲染每个Screen的组件，组件的层级不在Provider之下。

下面提供两种不破坏现有代码结构的可行方案：

方案一：给目标屏幕组件单独套上下文包装 #

直接在注册Screen时，用上下文Provider包裹对应的组件，这样该屏幕及其所有子组件都能访问上下文。

修改你的代码如下：

import React, { useCallback } from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { MyStackParamsList } from './types';

import LoginScreen from '../screens/preLogin/LoginScreen';
import HomeScreen from '../screens/postLogin/User/HomeScreen';
import RegisterScreen from '../screens/preLogin/RegisterScreen';
import ProfileScreen from '../screens/postLogin/User/ProfileScreen';
import ResetPasswordScreen from '../screens/preLogin/ResetPasswordScreen';
import EditProfileScreen from '../screens/postLogin/User/EditProfileScreen';
import useUserIdContext from '../hooks/useUserIdContext';
import { UserContext } from '../contexts/UserContext';


const Stack = createNativeStackNavigator<MyStackParamsList>()

const AuthStack = () => {
  const { id, setId } = useUserIdContext();
  // 用useCallback确保包装组件的引用稳定，避免不必要的重渲染
  const withUserContext = useCallback((Component) => {
    return () => <UserContext.Provider value={{ id, setId }}><Component /></UserContext.Provider>;
  }, [id, setId]);

  return (
    <Stack.Navigator screenOptions={{headerShown: false}} initialRouteName="LoginScreen">
      <Stack.Screen name="ResetPasswordScreen" component={ResetPasswordScreen} />
      {/* 给需要的屏幕套上上下文包装 */}
      <Stack.Screen name="LoginScreen" component={withUserContext(LoginScreen)} />
      <Stack.Screen name="RegisterScreen" component={withUserContext(RegisterScreen)} />
      <Stack.Screen name="HomeScreen" component={withUserContext(HomeScreen)} />
      <Stack.Screen name="ProfileScreen" component={withUserContext(ProfileScreen)} />
      <Stack.Screen name="EditProfileScreen" component={withUserContext(EditProfileScreen)} />
    </Stack.Navigator>
  );
};

export default AuthStack;

方案二：使用Stack.Group统一包裹目标屏幕（React Navigation 6+支持） #

如果你的React Navigation版本是6.x及以上，可以用Stack.Group结合screenOptions的wrapper属性，一次性给组内所有屏幕套上上下文：

import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { MyStackParamsList } from './types';

import LoginScreen from '../screens/preLogin/LoginScreen';
import HomeScreen from '../screens/postLogin/User/HomeScreen';
import RegisterScreen from '../screens/preLogin/RegisterScreen';
import ProfileScreen from '../screens/postLogin/User/ProfileScreen';
import ResetPasswordScreen from '../screens/preLogin/ResetPasswordScreen';
import EditProfileScreen from '../screens/postLogin/User/EditProfileScreen';
import useUserIdContext from '../hooks/useUserIdContext';
import { UserContext } from '../contexts/UserContext';


const Stack = createNativeStackNavigator<MyStackParamsList>()

const AuthStack = () => {
  const { id, setId } = useUserIdContext();

  return (
    <Stack.Navigator screenOptions={{headerShown: false}} initialRouteName="LoginScreen">
      <Stack.Screen name="ResetPasswordScreen" component={ResetPasswordScreen} />
      {/* 用Stack.Group统一给组内屏幕套上下文 */}
      <Stack.Group
        screenOptions={{
          wrapper: (props) => (
            <UserContext.Provider value={{ id, setId }}>
              {props.children}
            </UserContext.Provider>
          )
        }}
      >
        <Stack.Screen name="LoginScreen" component={LoginScreen} />
        <Stack.Screen name="RegisterScreen" component={RegisterScreen} />
        <Stack.Screen name="HomeScreen" component={HomeScreen} />
        <Stack.Screen name="ProfileScreen" component={ProfileScreen} />
        <Stack.Screen name="EditProfileScreen" component={EditProfileScreen} />
      </Stack.Group>
    </Stack.Navigator>
  );
};

export default AuthStack;

这两种方案都不需要修改现有屏幕组件的代码，仅在导航器层面做调整，就能让指定屏幕及其子组件正常访问UserContext。

内容的提问来源于stack exchange，提问作者Álvaro Vega Romero