React-Native Flexbox - 将一项放在垂直中心，另一项放在底部答案

【问题标题】：React-Native Flexbox - Position One Item at Vertical Center and other at BottomReact-Native Flexbox - 将一项放在垂直中心，另一项放在底部
【发布时间】：2023-04-07 01:56:02
【问题描述】：

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

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

<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>

【问题讨论】：

标签： react-native react-native-flexbox

【解决方案1】：

试试下面的代码

      <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>

【讨论】：

感谢分享。我的理解是使用 absolute 不是 flex-box 方式？关于如何使用 flexbox 执行此操作的任何提示？

【解决方案2】：

这对你有用。 @Nitish 的答案也将起作用。

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

            <View style={{
                height:0, //Here...
                justifyContent: "flex-end",
            }}>
                <Text>Vert Bottom</Text>
            </View>
        </View>
    );
}

【讨论】：

这对我不起作用...垂直中间文本位于水平中心上方。
如果在底部文本视图中添加heigh:0，它将居中。