TabNavigator 额外填充 [英] TabNavigator extra padding

问题描述

如何设置 TabNavigator 选项卡的高度和填充样式?我正在做以下事情:

How to style the TabNavigator Tab's height and padding? Im doing the following:

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 下方填充.我怎么做?谢谢.

How do I get rid of the padding between the icon and the label? I did padding:0 in iconStyle and also in tabStyle but no luck. I want no padding below the label too. How do I do that? Thanks.

发现额外的填充是由View引起的:

Found the extra padding is caused by View:

我该如何摆脱它?

推荐答案

通过设置解决:

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

这篇关于TabNavigator 额外填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！