Question

使一行文本与该行中最高文本的最大高度匹配的最佳方法是什么？代码如下：

<View style={styles.field}>
     <Text style={styles.titleCoverage}>Coverage</Text>
     <Text style={styles.titleFaceAmount}>Face Amount</Text>
     <Text style={styles.titlePremiums}>Premiums</Text>
</View>

样式表如下：

field: {
    flexDirection: "row",
    justifyContent: 'space-between',
    width: '95%',
    alignItems: 'center',
},
titleCoverage: {
    textAlign: 'center',
    backgroundColor: '#2980b9', 
    marginBottom: 5,
    width: 200, 
    paddingTop: 3,
    paddingBottom: 3
},
titleFaceAmount: {
    textAlign: 'center',
    backgroundColor: '#2980b9', 
    marginBottom: 5,
    width: 80, 
    paddingTop: 3,
    paddingBottom: 3
},
titlePremiums: {
    textAlign: 'center',
    backgroundColor: '#2980b9', 
    marginBottom: 5,
    width: 80, 
    paddingTop: 3,
    paddingBottom: 3
},

在这种情况下，“面额”文本的高度比其他两个文本高。给定一个可变的文本值（可能大或小），最好的方法是确保该行中的所有三个字符都与最大的字符保持相同的高度？

Answer 1

我假设您已将容器的显示属性设置为flex。

此后，您可能需要将容器的align-items属性设置为stretch。

display: flex;
align-items: stretch;

更多详细信息在这里：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

而且，对于我们的用例，我认为应该是一个附加条目：alignItems: 'stretch'映射中的styles.field。

将所有文字高度匹配到最大

1 个答案: