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

Question

我正在尝试使用 react-native 和 react-navigation 库。我正在尝试将参数传递给共享同一 Tab Navigator 的多个屏幕。

这是风景：

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>
  );
}

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

Answer 1

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

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

Answer 2

查看此的答案。

根据您使用的反应导航版本（我假设 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），您可能根本不想使用参数。您可以使用像 Recoil、Redux、React 的 useContext 这样的 state management tool，甚至可以创建您自己的自定义挂钩。

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

How to propagate react navigation params to multiple Screens sharing the same Navigator

react-native

react-navigation