Как заставить View View расширяться в зависимости от высоты его братьев и сестер подряд?

Question

В настоящее время у меня есть простой компонент легенды, который производит вывод примерно так:

Проблема в том, что я вручную установил height, чтобы синий прямоугольник был таким же высоким, как и текст. Можно ли сказать, что View просто расширяется естественным образом в зависимости от высоты текста, вместо того, чтобы вручную устанавливать какое-либо число как height?

Вы можете попробовать Snack или проверить код:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.legend}>
          <View style={styles.item}>
            <View style={styles.shape} />
            <View>
              <Text>Food</Text>
              <Text>25%</Text>
            </View>            
          </View>
           <View style={styles.item}>
            <View style={styles.shape} />
            <View>
              <Text>Utilities</Text>
              <Text>35%</Text>
            </View>            
          </View>
           <View style={styles.item}>
            <View style={styles.shape} />
            <View>
              <Text>Misc.</Text>
              <Text>40%</Text>
            </View>            
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    marginHorizontal: 50,
  },
  legend: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  item: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  shape: {
    backgroundColor: 'blue',
    width: 15,
    height: 30, // I DONT WANT TO HAVE TO DO THIS
    marginRight: 5
  }
});

export default App;

Любая помощь будет оценена, спасибо!

Answer 1

Если я правильно понимаю, сначала вы должны обернуть каждый элемент представлением, а затем добавить второе представление с помощью flexGrow.

<View>
    <View style={{flexGrow: 1}}/>
    <View style={styles.item}>

Первое представление помогает вам изменить flexDirection на столбец, а второе представление, которое имеет flexGrow, помогает вам оттолкнуть синюю форму. И вы должны установить высоту фигуры на 100%.

shape: {
    backgroundColor: 'blue',
    width: 15,
    height: "100%", //here
    marginRight: 5,
}

Также я отредактировал ваш закусочный код и сохранил его. Ссылка: https://snack.expo.io/HkZ3a5q-V

Answer 2

Вы можете использовать высоту: «100%» для стиля фигуры, и все фигуры будут иметь максимальную высоту текста