Question

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

我已经检查了项目的github上的文档和未解决的问题，我已经用Google搜索了解决方案，而且我在Stackoverflow上找不到解决此问题的任何内容。这是一个示例代码：

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

您可以尝试其他解决方案： 1.在tabBarOptions中指定标签宽度

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

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

总而言之，tabbar选项看起来像

`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 2

您需要实施自定义tabBarComponent。您可以查看source code中的TabBarBottom和TabBarTop实施，了解您可能需要执行的操作。除了这个建议之外，尝试回答这个问题可能有点过于宽泛。

Answer 3

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

导航导致BottomTabNavigator，但问题是，上次我检查我发现使用这个特定的导航器时，它只允许大约4或5个选项卡，然后它会出现完全不需要的和不必要的堆栈错误，它只是拒绝确认导航器的其余部分！

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

3 个答案: