React Navigation静态配置结合React Context失效问题求助

问题根源 #

静态配置里的createStaticNavigation会提前实例化所有屏幕组件，这些组件的渲染时机早于外层的Context Provider，所以无法获取到Provider提供的上下文值，只能拿到createContext的默认值。

解决方法：用包装组件延迟屏幕渲染 #

不要直接把目标屏幕组件传入静态路由配置，而是新增一个简单的包装组件，让目标屏幕在包装组件内部渲染。这样屏幕组件会在Context Provider的作用域内被创建，就能正常获取上下文。

步骤1：修改路由配置 #

将原来直接传入的屏幕组件替换为包装组件，通过initialParams传递目标组件：

// root-router.tsx
// 定义通用包装组件
const ScreenWrapper = ({ component: Component, ...props }) => {
  return <Component {...props} />;
};

const rootStack = createNativeStackNavigator({
    initialRouteName: mainRoute.route,
    screenOptions: {
        title: mainRoute.title,
        headerRight: UserAppbarButton,
    },
    screens: {
        [mainRoute.route]: {
            screen: ScreenWrapper,
            initialParams: { component: mainRoute.page }
        },
        [userRoute.route]: {
            screen: ScreenWrapper,
            initialParams: { component: userRoute.page },
            options: {
                headerRight: undefined,
            },
        },
        [modifyMealRoute.route]: {
            screen: ScreenWrapper,
            initialParams: { component: modifyMealRoute.page }
        },
        [modifyIngredientRoute.route]: {
            screen: ScreenWrapper,
            initialParams: { component: modifyIngredientRoute.page }
        },
    },
});

export const Navigation = createStaticNavigation(rootStack);

步骤2：保留原Provider结构 #

main.tsx中的Context包裹逻辑无需改动，现在屏幕组件会在ScreenWrapper内部、Provider作用域内渲染：

// main.tsx
export const Main: FC = () => {
    const prefTheme = useColorScheme();
    const [isDark, setIsDark] = useState<boolean>(prefTheme === 'dark');

    return (
        <DarkmodeContext.Provider value={{ isDark, setIsDark }}>
            <ThemeContext.Provider
                value={isDark ? masterThemeDark : masterThemeLight}>
                <Navigation theme={isDark ? navThemeDark : navThemeLight} />
            </ThemeContext.Provider>
        </DarkmodeContext.Provider>
    );
};

原理说明 #

静态配置仅会提前实例化ScreenWrapper，而目标屏幕组件是在ScreenWrapper内部、当Navigation被Provider包裹后才渲染的，此时屏幕组件处于Context的作用域内，自然能获取到Provider提供的上下文值。

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