Блог

В моем приложении React Native есть навигатор вкладок с двумя вкладками, просто так:

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

Поскольку экраны в этих двух вкладках должны иметь доступ к двум разным API, и поскольку я использую Apollo Client 3.x, простым способом было бы обернуть эти два экрана, чтобы они могли получить доступ к своим соответствующим клиентам, вот так:

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

Однако это не разрешено React Navigation, возвращаемая ошибка: A Navigator can only contain Screen components as its direct children .

Теперь я могу обернуть сами дочерние навигаторы всякий раз, когда я пытаюсь их отобразить, но проблема, с которой я сталкиваюсь, заключается в том, что это приведет к повторному созданию клиента каждый раз, когда навигатор повторно отображает, что, похоже, довольно часто.

У кого-нибудь еще есть другая идея о том, как это решить?