Заставить дочерний контейнер занимать высоту родительского контейнера [React Native]

Question

Я создал <View> объект в реагирующем нативе, содержащий подряд <View> объекты, содержащие текстовые объекты.

Если текст больше 1 строки, контейнеры для текста не расширяются, чтобы заполнить родительский компонент, и это выглядит забавно.

Скриншот:

Это код стиля:

  bigContainer: {
    flex: 1,
    justifyContent: 'center',
    // flexDirection: 'row'
  },

  textContainer: {
    flex: 1,
    paddingLeft: 0,
    paddingRight: 0,
    borderRightWidth: 1,
    borderRadius: 0,
    borderColor: 'rbga(0, 0, 0, 0.1)',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 7,
    paddingBottom: 7,
    overflow: 'hidden'
  },

  text: {
    fontSize: 18,
    textAlign: 'center'
  },

Пожалуйста, помогите, я не понимаю, почему это происходит, поскольку у меня flex: 1, и мои исследования не помогли мне. Спасибо !!

ОБНОВЛЕНИЕ: решено: я забыл, что <TouchableOpacity>, контейнер, который содержит текстовый контейнер, также ведет себя как flexbox

Answer 1

В React Native flex работает немного по-другому, так как принимает только одно число. Это из-за Yoga движка макета, который Facebook использует

flex: 1 не означает «расти столько, сколько нужно». Когда вы присваиваете группе дочерних компонентов это свойство, вы, по сути, говорите, что каждый элемент со свойством flex: 1 должен занимать столько же места, сколько и каждый другой элемент. Думайте о flex: 1 как о назначении соотношения. Если у вас есть 1 элемент без братьев и сестер, он попытается заполнить все доступное пространство. Если у вас есть 4 элемента, и все они - братья и сестры, и все они установлены на flex: 1, то каждый из них займет 1/4 (25%) доступного пространства.

Это также можно манипулировать, скажем, у вас есть 4 элемента и 3 из них установлены на flex: 1. Вы можете установить 4-й на flex: 2. Этот 4-й элемент теперь будет использовать вдвое больше места, чем другие компоненты (40% доступного пространства по сравнению с 20%). Flex также может быть установлен на отрицательное число, что означает, что при необходимости он будет уменьшен до минимальной высоты и ширины.

Это поведение в значительной степени идентично тому, как свойство flex-grow работает в CSS. Если вы хотите манипулировать начальным размером гибкого контейнера без учета его братьев и сестер, вы должны использовать свойство flex-basis (flexBasis в реагировании). flexBasis: content изменит размер контейнера в зависимости от его содержимого. flexBasis также принимает число, если вы хотите вручную установить начальную ширину ваших контейнеров.