如何在React Native中的多子子视图中垂直居中一个子节点

Question

我有一个视图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: {
    ???
  }
});

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