如何使视图高度根据其兄弟姐妹的连续高度展开？答案

【问题标题】：How to make View height expand based on the height of its siblings in a row?如何使视图高度根据其兄弟姐妹的连续高度展开？
【发布时间】：2019-05-29 08:37:09
【问题描述】：

我目前有一个简单的图例组件，它会产生如下输出：

问题是我手动将蓝色矩形的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;

任何帮助将不胜感激，谢谢！

【问题讨论】：

标签： react-native flexbox react-native-flexbox

【解决方案1】：

您可以在形状样式上使用 height: '100%' ，所有形状都将具有文本的最大高度

【讨论】：

【解决方案2】：

如果我理解正确，首先你应该用一个视图包裹你的每个项目，然后你应该用 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

【讨论】：

【解决方案3】：

实现这一目标的完整示例。

<View style={{flexDirection:'row'}}>
    <View style={{flex:1, flexDirection:'row', alignItems:'center'}}>
        <View style={{width: 10, backgroundColor:'blue', height:'100%'}} />
            <View>
                <Text>Food</Text>
                <Text>25%</Text>
                <Text>25%</Text>
                <Text>25%</Text>
            </View>     
        </View>
        <View style={{flex:1, flexDirection:'row', alignItems:'center'}}>
            <View style={{width: 10, backgroundColor:'blue', height:'100%'}} />
            <View>
                <Text>Utilities</Text>
                <Text>35%</Text>
            </View>     
        </View>
        <View style={{flex:1, flexDirection:'row', alignItems:'center'}}>
            <View style={{width: 10, backgroundColor:'blue', height:'100%'}} />
            <View>
                <Text>Misc.</Text>
                <Text>40%</Text>
        </View>     
    </View>
</View>

【讨论】：