将参数传递给选项卡导航器 React Navigation 5

Question

我正在使用materialTopTabs，似乎这会在安装后加载导航器中的所有屏幕。我有一个屏幕列表，其中有一个带有 2 个屏幕的选项卡导航器：Posts和Users。这两个屏幕都取决于从List传递的参数。但是，我只能使用此方法将参数传递到屏幕之一：

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

您可以为屏幕设置初始参数。

const PostsTabNav = createMaterialTopTabNavigator();
const PostsMainNav = (props) => {
    const temp = props.route.params.network
    return (
        <PostsTabNav.Navigator>
            <PostsTabNav.Screen name="NetworkPosts" component={NetworkPostsScreen} initialParams={network:temp}/>
            <PostsTabNav.Screen name="NetworkUsers" component={NetworkUsersScreen} initialParams={network:temp}/>
        </PostsTabNav.Navigator>
    );
};

Answer 2

将参数传递给导航器，然后使用 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