将参数传递给标签导航器React Navigation 5 [英] Passing params to tab navigator React Navigation 5

问题描述

我正在使用materialTopTabs，看来这会在安装导航器后将其加载到所有屏幕中.我有一个屏幕列表，其中有一个带有2个屏幕的标签导航器:帖子和用户.这两个屏幕均取决于从 List 传递的参数.但是，我只能使用此方法将参数传递给屏幕之一:

I’m using materialTopTabs and it seems like this loads all the screens in the navigator once its mounted. I have a screen List and inside it a tab navigator with 2 screens: Posts and Users. These two screen both depend on params passed from List. However, i am only able to pass params to one of the screens using this method:

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

我试图通过以下方法将参数直接传递给导航器:

I have tried to pass the params to my navigator directly by doing this:

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

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

The first option only allows me to pass to one screen. The second option allows me to access the params inside the navigator like this:

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传递到两个屏幕?如果没有，有没有更好的方法来处理这种情况?

Is there a way to pass temp to both my screens? If not is there a better way to handle this situation?

这是StackNavigator

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

推荐答案

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

Pass params to the navigator and then expose it to the tabs using React Context.

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

Create a context in a separate file which you can import in both your navigator and screens:

export const NetworkContext = React.createContext();

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

Then provide the params in the context:

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

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

In your screen component, use the context:

const network = React.useContext(NetworkContext);

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

这篇关于将参数传递给标签导航器React Navigation 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！