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

和选项卡图像。

应用高度后的样式对象

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

和选项卡图像

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

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

Answer 1

原因是minHeight和maxHeight。 tabStyle 对象默认具有 minHeight。因此，如果您设置了 minHeight 和 maxHeight，那么您可以将 height 应用于它。

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