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
    },
    }
});

如何摆脱图标和标签之间的填充？我在padding:0和iconStyle中tabStyle做了{但没有运气}。我也希望label以下没有填充。我怎么做？感谢。

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

我如何摆脱它？

Answer 1

通过设置解决：

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

Answer 2

不幸的是，在这个库中有很多布局设置是硬编码的（比如padding：12 for tab，默认来自其他地方）。

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

现在，我正在攻击这些课程，以找到一种快速肮脏的方式来允许矩形（x> y），而不仅仅是方形（x = y，默认）标签图标。

其他选项是创建自定义tabBar组件作为维护者建议

Answer 3

在style下单独tabBarOptions

  tabBarOptions: {
    style: {
      height: 45
    }
  }

Answer 4

我遇到了类似的问题，我通过覆盖所需的特定填充属性（例如paddingTop或paddingLeft）而不是padding来解决了这个问题。

Answer 5

我只是通过查看此页面https://reactnavigation.org/docs/en/material-top-tab-navigator.html

完成的

我的TabStack看起来像这样：

const tabBarOptions = {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,
  },
  style: {
    paddingTop: 50,
    backgroundColor: 'red',
  },
}

export const TabStack = createMaterialTopTabNavigator({
  History: History,
  Current: Current,
  Settings: Settings,
}, {
    tabBarOptions: tabBarOptions
});

TabNavigator额外填充

5 个答案: