构建结合了堆栈和抽屉的TabNavigator

问题描述

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

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个屏幕并在它们上滑动

解决方法

您可以使用所需的屏幕创建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>
  );
};

如果对此有任何疑问，请在此处评论。