TabNavigator额外填充

Question

如何设置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引起的：

​

我该怎么摆脱它呢？

Answer 1

通过设置解决：

tabBarOptions: {
  labelStyle: {
    margin: 0
  },
}

Answer 2

尝试在tabBarOptions下使用style

  tabBarOptions: {
    style: {
      height: 45
    }
  }

Answer 3

不幸的是，很多布局设置都是硬编码在这个库中的(比如padding: 12 for tab，默认情况下来自其他地方)。

唯一的选择是查看node_modules\react-navigation\lib\views\TabView\文件，并根据需要进行调整。

现在，我正在修改这些源代码，以找到一种快速的方式来允许矩形(x>y)，而不仅仅是方形(x=y，默认)选项卡图标。

另一种选择是按照维护人员的建议创建自定义tabBar组件