使用react-navigation我创建了一个带有多个选项卡的tabNavigator（共7个） . 我希望标签延伸到屏幕之外，以便用户在顶部滑动以查看剩余的项目 . 但是，当我创建tabNavigator时，选项卡仅适合屏幕宽度， Headers 文本相互重叠 .
我已经检查了项目的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
},
},
});
1 回答
您需要实现自定义tabBarComponent . 您可以查看source code中的
TabBarBottom和TabBarTop实现，了解您可能需要执行的操作 . 除了这个建议之外，尝试回答这个问题可能有点过于宽泛 .