如何在React Navigation 5中用不同的上下文包装两个不同的选项卡

Question

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

现在，每当我试图渲染子导航器时，我都可以将其本身包装起来，但我遇到的问题是，每次导航器重新渲染时，都会重新创建客户端，这似乎很常见。

其他人对如何解决这个问题有其他想法吗？

Answer 1

您将屏幕制作成一个组件，然后包装该navigator。然后将该组件放置在tabNavigator中。

我相信这是对你有效的解决方案。

const MainStack = createNativeStackNavigator();
function MainStackScreen() {
return (
<ListContextWrapper>
<MainStack.Navigator
initialRouteName="MainScreen"
screenOptions={({ route }) => ({
headerShown: false,
})}
>
<MainStack.Screen name="MainScreen" component={MainScreen} />
<MainStack.Screen name="FilterModal" component={FilterModal} />
<MainStack.Screen name="DescriptionModal" component={DescriptionModal} />
</MainStack.Navigator>
</ListContextWrapper>
);
}

然后在您的选项卡导航：

const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
...
<Tab.Screen name="Main" component={MainStackScreen}
</Tab.Navigator>
/>