reactjs - 将参数传递给标签导航器React Navigation 5

Question

我使用的是materialTopTabs，安装完毕后，这似乎会在导航器中加载所有屏幕。我有一个屏幕列表，其中有一个带2个屏幕的标签导航器:发表和用户。这两个屏幕都取决于从列表传递的参数。但是，我只能使用此方法将参数传递给屏幕之一:

navigation.navigate('PostsTabNav', {
  params: {
    network: item,
  },
  screen: 'NetworkPosts' //or NetworkUsers
});

我试图通过这样做直接将参数传递给我的导航器:

navigation.navigate('PostsTabNav', {
  network: item
});

第一个选项仅允许我转到一个屏幕。第二个选项允许我这样访问导航器内部的参数:

const PostsTabNav = createMaterialTopTabNavigator();
const PostsMainNav = (props) => {
    const temp = props.route.params.network; //params here

    return (
        <PostsTabNav.Navigator>
            <PostsTabNav.Screen name="NetworkPosts" component={NetworkPostsScreen} />
            <PostsTabNav.Screen name="NetworkUsers" component={NetworkUsersScreen} />
        </PostsTabNav.Navigator>
    );
};

有没有办法将 temp传递到两个屏幕？如果没有，有没有更好的方法来处理这种情况？

这是 StackNavigator的代码

const NetworkListStackNav = createStackNavigator();
export const NetworksListNavigator = () => {
    return (
        <NetworkListStackNav.Navigator>
            <NetworkListStackNav.Screen name="List" component={ListScreen} />
            <NetworkListStackNav.Screen name="PostsTabNav" component={PostsMainNav} />
        </NetworkListStackNav.Navigator>
    );
};

Answer 1

将参数传递给导航器，然后使用React Context将其公开给选项卡。

在单独的文件中创建上下文，您可以在导航器和屏幕中将其导入:

export const NetworkContext = React.createContext();

然后在上下文中提供参数:

const PostsTabNav = createMaterialTopTabNavigator();

const PostsMainNav = ({ route }) => {
  return (
    <NetworkContext.Provider value={route.params.network}>
      <PostsTabNav.Navigator>
        <PostsTabNav.Screen name="NetworkPosts" component={NetworkPostsScreen} />
        <PostsTabNav.Screen name="NetworkUsers" component={NetworkUsersScreen} />
      </PostsTabNav.Navigator>
    </NetworkContext.Provider>
  );
};

在屏幕组件中，使用上下文:

const network = React.useContext(NetworkContext);

另请参阅 https://reactnavigation.org/docs/hello-react-navigation#passing-additional-props