我有一个标签栏导航器(水平滑动)并设置在屏幕底部,我希望该栏仅包含图标,没有标题,这是当前的设计:
这是代码:
const AppTabNavigator = createMaterialTopTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-home" style={{color: 'white'}} color={tintColor} size={24} />
)
}
},
Hot: {
screen: SettingsScreen,
navigationOptions: {
tabBarLabel: 'Hot',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-flame" style={{color: 'white'}} color={tintColor} size={24} />
)
}
}
}, {
order: ['Home', 'Hot'],
tabBarPosition: 'bottom',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {
activeTintColor: 'orange',
inactiveTintColor: 'grey',
style: {
backgroundColor: '#4050B5',
borderTopWidth: 0.5,
borderTopColor: 'grey'
},
indicatorStyle: {
height: 0
},
showIcon: true
}
})
我想要没有标题的选项卡栏,只有图标,但是如果我删除 tabBarLabel,它仍然从“Home: {”和“Hot: {”获取名称,我发现删除标题的唯一方法是将 tabBarLabel 设置为空格,空不起作用:
tabBar标签: ' '
但结果很糟糕:
我希望图标几乎不接触屏幕底部,就像唯一的填充位于图标的上方和下方一样。