构建一个结合 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>
  );
};

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