结合 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 = () => {&nbsp; return (&nbsp; &nbsp; <Tab.Navigator>&nbsp; &nbsp; &nbsp; <Tab.Screen name="Screen1" component={Screen1} />&nbsp; &nbsp; &nbsp; <Tab.Screen name="Screen2" component={Screen2} />&nbsp; &nbsp; &nbsp; <Tab.Screen name="Screen3" component={Screen3} />&nbsp; &nbsp; </Tab.Navigator>&nbsp; );};然后，将它包含在您MainStackNavigator而不是像Swipe这样的屏幕组件中。const MainStackNavigator = () => {&nbsp; return (&nbsp; &nbsp; <Stack.Navigator&nbsp; &nbsp; &nbsp; screenOptions={{&nbsp; &nbsp; &nbsp; &nbsp; cardStyle: { backgroundColor: theme['primaryColor'] },&nbsp; &nbsp; &nbsp; &nbsp; header: () => <MenuComponent />,&nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp; <Stack.Screen name="Logins" component={LoginScreen} />&nbsp; &nbsp; &nbsp; <Stack.Screen name="Tabs" component={TabNavigator} />&nbsp; &nbsp; &nbsp; <Stack.Screen name="List" component={ListScreen} />&nbsp; &nbsp; &nbsp; <Stack.Screen name="Detail" component={DetailScreen} />&nbsp; &nbsp; </Stack.Navigator>&nbsp; );};如果您对此有任何问题，请在这里发表评论。