如何设置TabNavigator标签的高度和填充的样式?我正在做以下事情:
import Icon from "react-native-vector-icons/MaterialIcons";
const tabNav = TabNavigator({
TabItem1: {
screen: MainScreen,
navigationOptions: {
tabBarLabel:"Home",
tabBarIcon: ({ tintColor }) => <Icon name={"home"} size={20} color={tintColor} />
}
},
TabItem2: {
screen: MainScreen,
navigationOptions: {
tabBarLabel:"Home",
tabBarIcon: ({ tintColor }) => <Icon name={"home"} size={30} color={tintColor} />
}
},
TabItem3: {
screen: MainScreen,
navigationOptions: {
tabBarLabel:"Browse",
tabBarIcon: ({ tintColor }) => <Icon name={"home"} color={tintColor} />
}
}
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#222',
activeBackgroundColor :'yellow', //Doesn't work
showIcon: true,
tabStyle: {
padding: 0, margin:0, //Padding 0 here
},
iconStyle: {
width: 30,
height: 30,
padding:0 //Padding 0 here
},
}
});

如何去除图标和标签之间的填充?我用iconStyle和tabStyle做了padding:0,但没有成功。我也不想要label下面的填充。我该怎么做?谢谢。
发现额外的填充是由View引起的:

我该怎么摆脱它呢?
发布于 2018-03-16 17:40:46
通过设置解决:
tabBarOptions: {
labelStyle: {
margin: 0
},
}发布于 2017-10-20 23:11:30
尝试在tabBarOptions下使用style
tabBarOptions: {
style: {
height: 45
}
}发布于 2017-12-20 00:06:13
不幸的是,很多布局设置都是硬编码在这个库中的(比如padding: 12 for tab,默认情况下来自其他地方)。
唯一的选择是查看node_modules\react-navigation\lib\views\TabView\文件,并根据需要进行调整。
现在,我正在修改这些源代码,以找到一种快速的方式来允许矩形(x>y),而不仅仅是方形(x=y,默认)选项卡图标。
另一种选择是按照维护人员的建议创建自定义tabBar组件
https://stackoverflow.com/questions/46814791
复制相似问题