Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.9k views
in Technique[技术] by (71.8m points)

reactjs - Passing params to tab navigator React Navigation 5

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

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

Here's the code for the StackNavigator

const NetworkListStackNav = createStackNavigator();
export const NetworksListNavigator = () => {
    return (
        <NetworkListStackNav.Navigator>
            <NetworkListStackNav.Screen name="List" component={ListScreen} />
            <NetworkListStackNav.Screen name="PostsTabNav" component={PostsMainNav} />
        </NetworkListStackNav.Navigator>
    );
};
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

Also see https://reactnavigation.org/docs/hello-react-navigation#passing-additional-props


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...