如何在 React Native 的多子父视图中将一个子垂直居中答案

【问题标题】：How to center one child vertically in multi child parent view in React Native如何在 React Native 的多子父视图中将一个子垂直居中
【发布时间】：2016-03-12 00:58:22
【问题描述】：

我有一个视图 A（视图 - 图像），它是 B（文本）和 C（文本）的父级。我希望 B 文本始终在 A 中垂直和水平居中。在容器 A 上使用 alignItems: 'center'、justifyContent: 'center' 的问题在于它考虑了 B 和 C 的组合高度，然后居中它们垂直基于它们的组合高度。我只是想让 B 在 A 内居中，我希望 C 在底部对齐。

B 必须始终垂直居中对齐，无论其高度或 B 包含的文本长度如何。
C 必须始终与容器 A 的底部对齐。

这是我想要获得的视觉效果：

并以一些代码为例：

<View style={styles.viewA}>
    <Text style={styles.textB}>
      I should be vertically centered in A, regardles of my size or the size / place of C.
    </Text>
    <Text style={styles.TextC}>
      I should be on the bottom of A
    </Text>
</View>

const styles = StyleSheet.create({
  viewA: {
    height: 360,
    width: 360,
    alignItems: 'center', // doesn't work
    justifyContent: 'center', // doesn't work
    ???: ???
  },
  viewB: {
    ???
  },
  viewC: {
    ???
  }
});

【问题讨论】：

标签： javascript ios react-native

【解决方案1】：

您应该使用React Native's Flexbox 来对齐项目。方法如下：

<View style={styles.viewA}>
  <View style={styles.textB}>
     <Text>
    I should be vertically centered in A, regardles of my size or the size / place of C.</Text>
  </View>
  <View style={styles.TextC}>
    <Text>
      I should be on the bottom of A
    </Text>
 </View>
</View>

const styles = StyleSheet.create({
 viewA: {
  height: 360,
  width: 360,
  alignItems: 'center', // doesn't work
  justifyContent: 'center', // doesn't work
  flex: 1
 },
 viewB: {
  flex: .8
 },
 viewC: {
  flex: .2
 }
});

【讨论】：