React-Native Flexbox - 将一个项目放置在垂直中心，另一个放置在底部 [英] React-Native Flexbox - Position One Item at Vertical Center and other at Bottom

问题描述

在父视图中，我想垂直居中对齐一段文本，并在视图底部有另一个文本.每当我添加底部文本时，它会将垂直居中视图的位置向上移动(使其剩余空间的垂直中心).

Within a parent view, I would like to vertically center align one piece of text and have another at the bottom of the view.Whenever I add the bottom text, it shifts the position of the vertical centered view upwards (to make it the vertical center of the remaining space).

如何使文本相对于父视图垂直居中对齐?更新:我知道我可以使用 {position: 'absolute',bottom:0}，但想了解 flex-box 解决方案.

How do I keep the text vertically centered align relative to the parent view? Update: I understand I can do this using {position: 'absolute', bottom:0}, but want to understand the flex-box solution.

<View style={{height: 300, borderColor: "black", borderWidth: 1}}>
    <View style={{ justifyContent: "center", flex: 1 }}>
        <Text>Vert Middle</Text>
    </View>

    <View>
        <Text>Vert Bottom</Text>
    </View>
</View>

推荐答案

试试下面的代码

      <View style={{height: 300, borderColor: "balck", borderWidth: 1}}>
          <View style={{ backgroundColor: 'red', justifyContent: "center", flex: 1 }}>
              <Text>Vert Middle</Text>
          </View>

          <View style={{position: 'absolute', bottom: 0}}> // Here is your updations
              <Text>Vert Bottom</Text>
          </View>
      </View>

这篇关于React-Native Flexbox - 将一个项目放置在垂直中心，另一个放置在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！