【问题标题】: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”下有多个导航器。确保每个导航器都位于单独的“屏幕”容器下。
猜你喜欢
  • 2020-09-12
  • 2021-02-28
  • 2021-03-09
  • 2020-02-14
  • 1970-01-01
  • 2020-12-26
  • 1970-01-01
  • 2021-06-06
  • 1970-01-01
相关资源
最近更新 更多