React-Navigation 带有 7 个选项卡的 tabNavigator - 将其扩展到屏幕之外

Question

使用 react-navigation 我创建了一个带有多个选项卡（总共 7 个）的 tabNavigator。我想让选项卡延伸到屏幕之外，以便用户在顶部滑动以查看剩余的项目。但是，当我创建 tabNavigator 时，选项卡仅适合屏幕宽度并且标题文本相互重叠。

我检查了项目 github 上的文档和未解决的问题，我用 Google 搜索了解决方案，但在 Whosebug 上找不到任何解决此问题的信息。这是一个示例代码：

const TabsScreen = TabNavigator({
  tab1: { screen: Tab1Screen },
  tab2: { screen: Tab2Screen },
  tab3: { screen: Tab3Screen },
  tab4: { screen: Tab4Screen },
  tab5: { screen: Tab5Screen },
  tab6: { screen: Tab6Screen },
  tab7: { screen: Tab7Screen }
}, {
  swipeEnabled: true,
  tabBarPosition: 'top',
  navigationOptions: {
    lazy: true //I am using "react-navigation": "1.0.0-beta.22"
  },
  tabBarOptions: {
    scrollEnabled: true,
    labelStyle: {
      width: 200, // I tried setting this based on screensize, etc
      fontSize: 18
    },
  },
});

Answer 1

您需要实施自定义 tabBarComponent. You can take a look at the TabBarBottom and TabBarTop implementations in the source code 以了解您可能需要执行的操作。除了这个建议之外，这个问题可能有点过于宽泛，无法尝试回答。

Answer 2

您可以尝试替代解决方案： 1.Specify tabBarOptions 内的标签宽度

tabStyle: { width: Dimensions.get("window").width / 3.5 }

在 tabBarOptions 中设置滚动启用 scrollEnabled: true

总而言之，tabbaroptions 看起来像

` tabBarOptions: { activeTintColor: Colors.FontColors.base_grey, inactiveTintColor: Colors.FontColors.light_grey,

  tabStyle: {
    width: Dimensions.get("window").width / 3.5 // number of tabs are 4
  },
  scrollEnabled: true
}`

Answer 3

正如其他人提到的，您需要实现一个自定义组件，我最近一直在使用 BottomTabNavigator，通过 app.js 调用。导航从“./navigation”导入导航；

Navigation 导致 BottomTabNavigator，但这里有问题，上次我检查时发现使用这个特定的 Navigator 时，它只允许大约 4 或 5 个选项卡，然后才会给出完全不需要和不必要的堆栈错误，它只是拒绝承认剩下的领航员！

React-Navigation 带有 7 个选项卡的 tabNavigator - 将其扩展到屏幕之外

React-Navigation tabNavigator with 7 tabs - extending it beyond screen

react-native

react-navigation