设置 React Navigation Material Top Tab Navigator 的高度样式属性答案

【问题标题】：Setting height style property of React Navigation's Material Top Tab Navigator设置 React Navigation Material Top Tab Navigator 的高度样式属性
【发布时间】：2019-09-19 11:23:58
【问题描述】：

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

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

应用高度之前的样式对象

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

和标签图片

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

如何为每个标签应用高度？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

原因是minHeight和maxHeight。 tabStyle 对象默认有 minHeight。所以如果你设置了minHeight和maxHeight，那么你可以对它应用height。

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

【讨论】：

我在 TabStyle 中添加了 minHeight 和 maxHeight，然后在样式中添加了高度，没有任何区别。然后我尝试为 TabStyle 添加高度；没有任何区别。当我在 screenOptions 中为 tabBarStyle 添加高度时，高度发生了变化，但标签标签被向上推。这一切都非常混乱且不直观。

【解决方案2】：

您可以使用 screenOptions 而不是 tabBarOptions 来更改 TabBar 的高度。在 tabBarStyle 属性中应用高度。

screenOptions={({ route }) => ({ 
   tabBarStyle: { height: 40 },

但是，它会将标签栏标签向上推离屏幕，可能需要为它们添加填充。

解决方案：将文本标签包裹在视图中，将 flex 和 flex-direction: 列应用于视图。然后您可以控制标签的垂直间距。

【讨论】：