如何创建具有多行的底部选项卡导航器？答案

【问题标题】：How to create a bottom tab navigator with multiple rows?如何创建具有多行的底部选项卡导航器？
【发布时间】：2019-12-14 09:35:27
【问题描述】：

我的应用具有更多的底部选项卡选项，无法舒适地放在一行中。 React Navigation 的 createBottomTabNavigator 只能在底部菜单中创建一行标签，那么有没有办法创建多行底部标签菜单呢？

【问题讨论】：

标签： javascript react-native

【解决方案1】：

由于我不知道您想要达到什么目标，因此这可以帮助您解决问题。只需使用嵌套的createBototmTabNavigator

const HomeStack = createBottomTabNavigator({
  a: createBottomTabNavigator({
    b: {
      screen: B
    },
    c: {
      screen: C
    },
    d: {
      screen: D
    }
  })
})

export default createAppContainer(HomeStack);

编辑

要创建显示第二行的“展开”选项卡，您可以像这样使用它

const HomeStack = createBottomTabNavigator({
  a: {
    screen: A
    },
    expand: createBottomTabNavigator({
    c: {
      screen: C
    },
    d: {
      screen: D
    }
  })
})

export default createAppContainer(HomeStack);

【讨论】：

感谢您的回复。此解决方案可以在底部菜单中创建两行，但我只希望第二行显示用户是否点击了“展开”选项卡。如果用户选择展开菜单，有没有办法只显示第二行？
@RaghavGopalakrishnan 我已经编辑了我的答案。如果他们点击展开选项卡，那只会显示第二行。让我知道这是否有效
@RaghavGopalakrishnan 很高兴它成功了！请投票并将答案标记为正确:)