react-native - 设置 React Navigation 的 Material Top Tab Navigator 的高度样式属性

Question

我正在使用MaterialTopTabNavigator制作顶部标签。但是在风格上有一个问题。

我可以设置MaterialTopTabNavigator使用多种样式的样式。当我设置tab的高度时，容器的高度会改变，而不是我认为的tab 。下面的图片是一个示例。

1. 应用高度之前的样式对象

labelStyle: {
    color: '#7d3aff',
    fontSize: 12,
    lineHeight: 12,
    backgroundColor: '#a0f312',
  },
  tabStyle: {
    borderWidth: 1,
    borderColor: '#7d3aff',
    borderRadius: 10,
    backgroundColor: '#f012',
  },
  style: {
    backgroundColor: '#fff',
  },
  indicatorStyle: {
    height: 0,
  },

和标签图像。

2. 应用高度后的样式对象

labelStyle: {
    color: '#7d3aff',
    fontSize: 12,
    lineHeight: 12,
    backgroundColor: '#a0f312',
  },
  tabStyle: {
    height: 30, // the only change is here
    borderWidth: 1,
    borderColor: '#7d3aff',
    borderRadius: 10,
    backgroundColor: '#f012',
  },
  style: {
    // height: 30, // there is no difference do it or apply height in tabStyle
    backgroundColor: '#fff',
  },
  indicatorStyle: {
    height: 0,
  },

和标签图像

如您所见，高度应用于标签栏的容器，而不是标签或标签栏，即标签的高度没有变化。

如何将高度应用于每个选项卡？

标签： react-nativereact-navigation

Answer 1

它的原因是minHeight和maxHeight。该tabStyle对象具有minHeight默认值。所以如果你设置minHeightand maxHeight，那么你就可以申请height它。

tabStyle: {
    borderWidth: 1,
    borderColor: colors.primary,
    borderRadius: 10,
    backgroundColor: '#f012',
    minHeight: 10,
    maxHeight: 30,
  },