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

Question

我是 React native 的新手，在复制之前我尝试了各种解决方案，例如 如何在 React Native 中从 DRAWER NAVIGATION 导航到 BOTTOM TAB BAR NAVIGATION？ 和 在 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

您需要创建一个自定义抽屉来聚焦您的底部选项卡项目，这些项目在您的底部选项卡内注册，类似于您问题中的链接，即How to Navigate from DRAWER NAVIGATION to BOTTOM TAB BAR NAVIGATION in react native?