“justifyContent：center”使用“height：100％”（React Native / Flexbox）正确打破布局

Question

这是我的简化代码：

<View style={{flexDirection: "row", width: 200}}>
    <View style={{borderWidth: 2, flex: 1, height: 100}}>
        <Text>flex: 1, height: 80</Text>
    </View>

    <View style={{borderWidth: 2, width: 100, height: "100%", justifyContent: "center"}}>
        <Text>width: 100, height: 100%, justifyContent: center</Text>
    </View>
</View>

这两个方框应按高度排列。但是当我添加justifyContent：“center”将文本居中放在中间时，右边的框完全错误的高度。怎么了？

Answer 1

这是因为justifyContent按照给定的空间和高度：'100％'沿着主轴（这里是列）分配所有孩子的子项：'100％'，这里需要父母的高度来分配

有两种方法可以使文本居中： 1 - 更改高度：'100％'到定义的高度为100，textAlign：'center'到文本

.as-console-wrapper { max-height: 100% !important; top: 0; }

OR

2 - 为父级和textAlign指定一个已定义的高度：'center'为text

<View style={{ flexDirection: 'row', width: 200 }}>
    <View style={{ borderWidth: 2, flex: 1, height: 100, }}>
      <Text>flex: 1, height: 80</Text>
    </View>

    <View
      style={{
        borderWidth: 2,
        width: 100,
        height: 100,

       justifyContent : 'center'
      }}
    >
      <Text style={{textAlign : 'center'}}  >width: 100, height: 100, justifyContent: center</Text>
    </View>
  </View>

让我知道这是否适合你）