Настройка свойства стиля высоты в Навигаторе верхней вкладки материала React Navigation

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

и изображения вкладки

Как вы видели,высота применяется к контейнеру из панели вкладок , а не к tab или панели вкладок , т. е. изменений нетвысота вкладки.

Как я могу применить высоту к каждой вкладке?

Answer 1

Причина этого minHeight и maxHeight.tabStyle объект имеет minHeight по умолчанию.Так что если вы установите minHeight и maxHeight, то вы можете применить к нему height.

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