使用Expo Router如何向页面传递props？无需Context的可行方案

不用Context也能实现，直接借助React Navigation的参数传递机制就行，下面给两种简单可行的方案：

方案1：通过initialParams初始传递 #

修改Stack.Screen的配置，把open和setOpen作为初始参数传入目标页面：

function RootLayoutNav() {
    const colorScheme = useColorScheme();
    const [open, setOpen] = useState(false);

    return (
        <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
            <Stack>
                <Stack.Screen 
                    name="index" 
                    options={{
                        headerShown: true,
                        headerLeft: () => (
                                <Pressable onPress={() => setOpen(true)}>
                                    {({ pressed }) => (
                                       <Text>Open</Text>
                                    )}
                                </Pressable>
                        ),
                    }}
                    initialParams={{ open, setOpen }} // 传递状态与方法
                />
            </Stack>
        </ThemeProvider>
    );
}

在index页面中，通过route.params直接获取使用：

function IndexScreen({ route }) {
    const { open, setOpen } = route.params;
    return (
        <View>
            <Text>当前状态：{open ? '已打开' : '已关闭'}</Text>
            <Pressable onPress={() => setOpen(!open)}>
                <Text>切换状态</Text>
            </Pressable>
        </View>
    );
}

方案2：通过navigation.setParams动态同步 #

如果需要open状态变化时，实时同步到index页面的参数，可以用useEffect配合setParams更新：

function RootLayoutNav() {
    const colorScheme = useColorScheme();
    const [open, setOpen] = useState(false);
    const navigation = useNavigation();

    // 状态变化时更新页面参数
    useEffect(() => {
        navigation.setParams({ open, setOpen });
    }, [open, setOpen, navigation]);

    return (
        <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
            <Stack>
                <Stack.Screen 
                    name="index" 
                    options={{
                        headerShown: true,
                        headerLeft: () => (
                                <Pressable onPress={() => setOpen(true)}>
                                    {({ pressed }) => (
                                       <Text>Open</Text>
                                    )}
                                </Pressable>
                        ),
                    }}
                />
            </Stack>
        </ThemeProvider>
    );
}

index页面依旧通过route.params获取，状态更新后参数会自动同步。

注意：这两种方案适合仅向index页面传递的场景，如果后续有多个页面需要共享该状态，Context会更合适；但单页面传递的话，以上方案足够简洁，无需引入复杂的状态管理逻辑。

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