javascript - 如何在 React Native 的多子父 View 中将一个子垂直居中

Question

我有一个 View A( View - 图像)，它是 B(文本)和 C(文本)的父 View 。我希望 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: {
    ???
  }
});

Answer 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
 }
});