如何创建具有多行的底部选项卡导航器? [英] How to create a bottom tab navigator with multiple rows?

问题描述

我的应用有更多的底部选项卡选项，无法舒适地放在一行中.React Navigation 的 createBottomTabNavigator 只能在底部菜单中创建一行 tab，那么有没有办法创建一个多行的底部 tab 菜单?

My app has more bottom tab options than can comfortably fit on one row. React Navigation's createBottomTabNavigator can only create one row of tabs in the bottom menu, so is there a way to create a bottom tab menu with multiple rows?

推荐答案

因为我不知道你想要实现什么，所以这可以帮助你解决这个问题.只需使用嵌套的 createBototmTabNavigator

Since I don't have any idea what you want to achieve, this could help you out to work on it. Simply use a nested createBototmTabNavigator

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

export default createAppContainer(HomeStack);

编辑

要创建一个显示第二行的展开"选项卡，您可以像这样使用

To create a "expand" tab which shows the second row, you use it like this

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

export default createAppContainer(HomeStack);

这篇关于如何创建具有多行的底部选项卡导航器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！