How to wrap two different tabs with different context in React Navigation 5

Question

My React Native app has a Tab Navigator with two tabs, simple like that:

<Tab.Navigator>
  <Tab.Screen
    name="Public"
    component={PublicNavigator}
    options={{
      tabBarIcon: () => <Ionicons name="ios-navigate" size={24} />,
    }}
  />
  <Tab.Screen
    name="Private"
    component={PrivateNavigator}
    options={{
      tabBarIcon: () => <Ionicons name="ios-pin" size={24} />,
    }}
  />
</Tab.Navigator>

Since the screens within these two tabs have to access two different APIs and since I am using Apollo Client 3.x, the easy way would be to wrap these two screens so that they can access their respective clients, like that:

<Tab.Navigator>
  <ApolloProvider
    client={
      new ApolloClient({
        uri: '/graphql/public',
        cache: new InMemoryCache(),
      })
    }>
    <Tab.Screen
      name="Public"
      component={PublicNavigator}
      options={{
        tabBarIcon: () => <Ionicons name="ios-navigate" size={24} />,
      }}
    />
  </ApolloProvider>
  <ApolloProvider
    client={
      new ApolloClient({
        uri: '/graphql/public',
        cache: new InMemoryCache(),
      })
    }>
    <Tab.Screen
      name="Private"
      component={PrivateNavigator}
      options={{
        tabBarIcon: () => <Ionicons name="ios-pin" size={24} />,
      }}
    />
  </ApolloProvider>
</Tab.Navigator>

However, this is not allowed by React Navigation, the returned error is: A Navigator can only contain Screen components as its direct children.

Now, I can wrap the child navigators themselves whenever I try to render them but the problem I have is that this would re-create the client every time the navigator re-renders, which seems to be pretty often.

Anyone else has another idea on how to resolve this?

Answer 1

等待大神答复