在选项卡导航上添加抽屉，所有选项卡都在抽屉中

Question

我是 React Native 的新手，在复制之前我尝试过各种解决方案，例如 如何从React Native 中的抽屉导航到底部选项卡栏导航？ 和 在 React Native 上使用 DrawerNavigator 和堆栈导航 但没有一个适合我的情况。

我想要实现的是，有 2 个屏幕堆栈，即登录屏幕和主屏幕。 我只需要主屏幕中的抽屉，而不是登录屏幕中的抽屉。 在主屏幕上有一个底部选项卡导航器。 我希望主屏幕中的抽屉包含所有选项卡，而且当选择抽屉中的屏幕时，它应该在底部选项卡导航中显示屏幕。 即使是一个基本的例子就足够了。

这是我的代码

const Tabs = () => {
return (
<Tab.Navigator
  screenOptions={{
    headerShown: false,
    tabBarShowLabel: false,
    tabBarHideOnKeyboard: true,
  }}
  barStyle={{ backgroundColor: "white" }}
>
  <Tab.Screen
    name="Trade"
    component={Trade}
    options={{
      tabBarIcon: ({ focused }) => (
        <TabBarIcon icon="eye" label="Trade" focused={focused} />
      ),
    }}
  />
  <Tab.Screen
    name="MyOrders"
    component={MyOrders}
    options={{
      tabBarIcon: ({ focused }) => (
        <TabBarIcon
          icon="shopping-bag"
          label="My Orders"
          focused={focused}
        />
      ),
    }}
  />
  <Tab.Screen
    name="Transport"
    component={Trade}
    options={{
      tabBarIcon: ({ focused }) => (
        <TabBarIcon icon="truck" label="Transport" focused={focused} />
      ),
    }}
  />
  <Tab.Screen
    name="Transaction"
    component={Trade}
    options={{
      tabBarIcon: ({ focused }) => (
        <TabBarIcon icon="wallet" label="Transaction" focused={focused} />
      ),
    }}
  />
  <Tab.Screen
    name="Profile"
    component={Trade}
    options={{
      tabBarIcon: ({ focused }) => (
        <TabBarIcon icon="user" label="Profile" focused={focused} />
      ),
    }}
  />
</Tab.Navigator>
);
};

const DrawerStack = () => {
return (
<Drawer.Navigator screenOptions={{ headerShown: false }}>
  {/* <Drawer.Screen name="Trade" component={Trade}></Drawer.Screen>
  <Drawer.Screen name="MyOrders" component={MyOrders}></Drawer.Screen> */}
  <Drawer.Screen name="Tabs" component={Tabs}></Drawer.Screen>
</Drawer.Navigator>
);
};

const AppStack = () => {
return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
  <Stack.Screen name="App" component={LoginStack}></Stack.Screen>
  <Stack.Screen name="HomeScreen" component={DrawerStack}></Stack.Screen>
</Stack.Navigator>
);
};

export default AppStack;

Answer 1

您需要创建一个自定义抽屉，重点关注底部选项卡项目，该项目在底部选项卡内注册，类似于您问题中的链接，即 如何从抽屉导航导航到底部选项卡栏导航在本机反应中？