当我使用抽屉导航到另一个屏幕时，底部选项卡导航器被隐藏

【问题标题】：bottom-tab-navigator gets hidden when I navigate to another screen using drawer当我使用抽屉导航到另一个屏幕时，底部选项卡导航器被隐藏
【发布时间】：2020-03-01 13:14:36
【问题描述】：

我在使用 expo 的 react-native 项目中使用底部选项卡和抽屉导航器。我在我的项目中使用 react-navigation v5。我不知道为什么，但是当我使用抽屉导航到另一个屏幕时，我往往会丢失该页面上的底部标签栏。谁能帮我在每一页上保持不变？

https://snack.expo.io/rkC_VVFE8

【问题讨论】：

您在抽屉中嵌套了选项卡。尝试在 Tabs 中嵌套 Drawer。
如果我将抽屉嵌套在标签内，那么在切换到第二个标签时我将无法使用抽屉。
我认为你需要为每个抽屉项目包装一个带有标签的 HOC。
阿文你能详细说明怎么做吗？

标签： react-native react-navigation react-navigation-v5

【解决方案1】：

您在 Tab.Screen 中嵌套了 Drawer (MyDrawer)，在 NavigationContainer 中嵌套了 Tab.Navigator。

示例代码：Gist

您的代码的解决方案：

export default function App() {
  return (
    <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Home" component={MyDrawer} />
          <Tab.Screen name="Settings" component={SettingsScreen} />
        </Tab.Navigator>
    </NavigationContainer>
  );
}

【讨论】：

使用上面的代码，如果我导航到设置屏幕，我可能会丢失抽屉
是的。你说的对。不幸的是，NavigationContainer 组件包含一个容器。当我添加多导航器时，错误提示：已为此容器注册了另一个导航器。您可能在单个“NavigationContainer”或“Screen”下有多个导航器。确保每个导航器都位于单独的“屏幕”容器下。