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

  );

};

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