嵌套导航时使用堆栈和组

Question

使用React Navigation 6，在文档中，他们建议您使用Groups来最小化嵌套导航器。

然而，我不确定在这个例子中如何做到这一点，在选项卡导航器中使用嵌套堆栈：

import * as React from 'react';
import { View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function FeedScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Settings"
onPress={() => navigation.navigate('Settings')}
/>
</View>
);
}
function ProfileScreen() {
return <View />;
}
function SettingsScreen() {
return <View />;
}
const FeedStack = createNativeStackNavigator();
function FeedStackScreen() {
return (
<FeedStack.Navigator>
<FeedStack.Screen name="Feed" component={FeedScreen} />
{/* other screens */}
</FeedStack.Navigator>
);
}
const ProfileStack = createNativeStackNavigator();
function ProfileStackScreen() {
return (
<ProfileStack.Navigator>
<ProfileStack.Screen name="Profile" component={ProfileScreen} />
{/* other screens */}
</ProfileStack.Navigator>
);
}
const Tab = createBottomTabNavigator();
function HomeTabs() {
return (
<Tab.Navigator screenOptions={{headerShown: false}}>
<Tab.Screen name="Feed" component={FeedStackScreen} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
</Tab.Navigator>
);
}
const RootStack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<RootStack.Navigator>
<RootStack.Screen
name="Home"
component={HomeTabs}
options={{ headerShown: false }}
/>
<RootStack.Screen name="Settings" component={SettingsScreen} />
</RootStack.Navigator>
</NavigationContainer>
);
}

当我重复使用堆栈时，在选项卡导航器中只使用一个堆栈，它仍然有效：

const TabStack = createNativeStackNavigator();
function FeedStackScreen() {
return (
<TabStack.Navigator>
<TabStack.Screen name="Feed" component={FeedScreen} />
{/* other screens */}
</TabStack.Navigator>
);
}
function ProfileStackScreen() {
return (
<TabStack.Navigator>
<TabStack.Screen name="Profile" component={ProfileScreen} />
{/* other screens */}
</TabStack.Navigator>
);
}
const Tab = createBottomTabNavigator();
function HomeTabs() {
return (
<Tab.Navigator screenOptions={{headerShown: false}}>
<Tab.Screen name="Feed" component={FeedStackScreen} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
</Tab.Navigator>
);
}

然而，当我尝试使用这样的组时：

const TabStack = createNativeStackNavigator();
function FeedStackScreen() {
return (
<TabStack.Group>
<TabStack.Screen name="Feed" component={FeedScreen} />
{/* other screens */}
</TabStack.Group>
);
}
function ProfileStackScreen() {
return (
<TabStack.Group>
<TabStack.Screen name="Profile" component={ProfileScreen} />
{/* other screens */}
</TabStack.Group>
);
}
const Tab = createBottomTabNavigator();
function HomeTabs() {
return (
<Tab.Navigator screenOptions={{headerShown: false}}>
<TabStack.Navigator>
<Tab.Screen name="Feed" component={FeedStackScreen} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
</TabStack.Navigator>
</Tab.Navigator>
);
}

我得到错误a navigator can only contain 'screen' 'group' or 'react.fragment'，因为如果不在component中写入导航器，就不能在另一个导航器中包含导航器。

这里是否有使用Group的方法，或者是否有正确的方法为每个"组"写入CCD_；群组"？

Answer 1

这里的问题是Group是navigator返回的组件。如果我们创建一个返回该组的JSX组件，那么从技术上讲，它不再是Group，而是它自己的JSX部件。

这是react-native-navigation中一个未解决的问题，在GitHub问题中也有讨论，但除了一个丑陋的破解之外，显然没有令人满意的解决方案。

我们可以内联调用函数组件。

function CustomGroupComponent() {
return <Tab.Group>
<Tab.Screen ... />
<Tab.Screen ... />
</Tab.Group>
}
export const Tabs = (props) => {
return (
<Tab.Navigator ...>
<Tab.Screen ...>
{CustomGroupComponent()}
</Tab.Navigator>
)
}

因此，总的来说，没有一个很好的解决方案。诀窍是使用{CustomGroupComponet()}将函数组件作为函数内联调用。

备注：我认为这是一种反模式，但就我而言，当前版本中没有其他解决方案。