使用React Native Navigation时如何正确将状态提升实现跨页面共享

问题原因 #

你直接向Navigator组件传递的state1属性只会被Navigator组件本身接收，不会自动透传给导航栈内部的各个屏幕组件，所以HomeScreen中无法直接通过props.state1拿到对应值。

可行解决方案 #

这里提供两种常用方案，你可以根据业务复杂度选择： #

方案1：使用React Context（推荐，适合多屏幕共享可更新状态）

这种方案适合需要在多个导航页面共享、修改状态的场景，不需要逐层手动传参：

1. 新建上下文文件AppContext.js：

import React from 'react';
// 创建公共上下文
const AppContext = React.createContext();
export default AppContext;

2. 修改App.js，用上下文Provider包裹导航组件：

import React from 'react';
import Navigator from "./Routes/homeStack"
import AppContext from './AppContext';

export default function App() {
    const [state, onState] = React.useState("foo")
    // 将状态和更新方法都传入上下文
    const contextValue = {
        state1: state,
        updateState: onState
    }
    return (
        <AppContext.Provider value={contextValue}>
            <Navigator />
        </AppContext.Provider>
   );
}

3. 在需要用状态的页面（HomeScreen/NewBlock）中直接读取上下文：

import React, { useContext } from 'react';
import { Text, StyleSheet } from 'react-native';
import AppContext from '../AppContext'; // 注意路径对应你的项目结构

export default function HomeScreen() {
    // 从上下文取出需要的状态
    const { state1 } = useContext(AppContext);
    return <Text style={styles.title}>{state1}</Text>
}

const styles = StyleSheet.create({
    title: {
        // 你的原有样式
    }
})

方案2：在导航栈定义处手动透传props（适合少量页面传参）

如果你的导航栈页面数量少，不想额外引入上下文，可以在定义Stack.Screen的时候手动传递props：
修改你的homeStack.js文件：

import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen'; // 替换为你实际的文件路径
import NewBlock from '../screens/NewBlock'; // 替换为你实际的文件路径

const Stack = createStackNavigator();

export default function Navigator(props) {
    // 先拿到App层传入的state1
    const { state1 } = props;
    return (
        <Stack.Navigator>
            <Stack.Screen name="Home">
                {/* 渲染组件时手动传入state1，同时保留导航自带的navigation、route属性 */}
                {(screenProps) => <HomeScreen {...screenProps} state1={state1} />}
            </Stack.Screen>
            <Stack.Screen name="NewBlock">
                {(screenProps) => <NewBlock {...screenProps} state1={state1} />}
            </Stack.Screen>
        </Stack.Navigator>
    )
}

修改后你原有的HomeScreen中props.state1就可以正常读取到值了。 #

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