如何将反应导航参数传播到共享同一导航器的多个屏幕答案

【问题标题】：How to propagate react navigation params to multiple Screens sharing the same Navigator如何将反应导航参数传播到共享同一导航器的多个屏幕
【发布时间】：2021-10-13 20:14:17
【问题描述】：

我正在尝试使用 react-native 和 react-navigation 库。我正在尝试将参数传递给共享同一选项卡导航器的多个屏幕。

这是风景：

App.js

const MainScreen = ({ navigation }) => {
  return (
    <Button
      onPress={() =>
        navigation.navigate("User", { prop_i_want_to_share: "asd" })
      } //This is the param I would like to share
    />
  );
};

const UserInfoScreen = ({ route }) => (
  <View>
    {route.params.prop_i_want_to_share} // Here I would like to get the param used in navigation
  </View>
);

const UserEditScreen = ({ route }) => (
  <View>
    {route.params.prop_i_want_to_share} // Here I would like to get the param used in navigation
  </View>
);

const UserTab = () => (
  <Tab.Navigator>
    <Stack.Screen name="UserInfo" component={UserInfoScreen} />
    <Stack.Screen name="UserEdit" component={UserEditScreen} />
  </Tab.Navigator>
);

render() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={MainScreen} />
        <Stack.Screen name="User" component={UserTab} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

基本上，我正在尝试传播参数，但我认为我没有正确设计导航器结构，这就是我发现这个问题的原因。为了让这成为可能，您会做出哪些改变？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

查看related question的答案。

根据您使用的 react-navigation 版本（我假设是 6.x），传递给您可以使用的嵌套导航器：

在主屏幕中

navigation.navigate('User', {
  screen: 'UserInfo',
  params: { prop_i_want_to_share: "asd" },
});

然后，您可以在导航到下一个屏幕后将参数传递给它：

在用户信息屏幕中

navigation.navigate('User', {
  screen: 'UserEdit',
  params: { prop_i_want_to_share: route.params.prop_i_want_to_share },
});

但是，如果您尝试更新全局变量，即在多个屏幕中使用的变量（例如：CurrentlyLoggedInUserId），您可能根本不想使用参数。你可以使用state management tool，比如 Recoil、Redux、React 的 useContext，甚至可以创建自己的自定义钩子。

【讨论】：

【解决方案2】：

我还没试过，但是最新的v6，你可以使用Groups：

<Stack.Navigator>
  <Stack.Group screenOptions={({ route, navigation }) => ({ prop_i_want_to_share: 'asd' })}>  
    {/* screens */}
  </Stack.Group>
</Stack.Navigator>

【讨论】：