构建一个与Stack和Drawer相结合的TabNavigator

Question

我目前已经构建了以下导航器：

const MainStackNavigator = () => {
return (
<Stack.Navigator
screenOptions={{
cardStyle: {backgroundColor: theme['primaryColor']},
header: () => <MenuComponent />,
}}>
<Stack.Screen name="Logins" component={LoginScreen} />
<Stack.Screen name="Swipe" component={SwipeScreen} />
<Stack.Screen name="List" component={ListScreen} />
<Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
);
};
return (
<Root>
<NavigationContainer>
<Drawer.Navigator
screenOptions={{swipeEnabled: false}}
drawerContent={(props) => <SidebarComponent {...props} />}
initialRouteName="Login">
<Drawer.Screen name="List" component={MainStackNavigator} />
</Drawer.Navigator>
</NavigationContainer>
</Root>
);

我需要将TabNavigator添加到"；滑动"；屏幕，这样我就可以再构建3个屏幕，并在它们上滑动

Answer 1

您可以创建具有所需屏幕的TabNavigator。然后将其包含在MainStackNavigator而不是Swipe屏幕组件中。

首先，您可以像这样创建TabNavigator。

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Screen1" component={Screen1} />
<Tab.Screen name="Screen2" component={Screen2} />
<Tab.Screen name="Screen3" component={Screen3} />
</Tab.Navigator>
);
};

然后，将其包含在MainStackNavigator中，而不是像这样的Swipe屏幕组件中。

const MainStackNavigator = () => {
return (
<Stack.Navigator
screenOptions={{
cardStyle: { backgroundColor: theme['primaryColor'] },
header: () => <MenuComponent />,
}}>
<Stack.Screen name="Logins" component={LoginScreen} />
<Stack.Screen name="Tabs" component={TabNavigator} />
<Stack.Screen name="List" component={ListScreen} />
<Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
);
};

如果你对此有任何问题，请在这里发表评论。