ReactNative如何设置Text组件的文本垂直居中

Question

当React Native Text组件的高度高于文本（在Text内部）时，文本将位于顶部（垂直对齐顶部），并且不能设置为垂直对齐中心。

就像这张照片。 （检查Text组件）

<View style={{ display: 'flex', justifyContent: 'center', alignItem: 'center', height: 96 }}>
  <Text style={{ fontSize: 32 }}>Select</Text>
</View>

display: 'flex'在View组件中有效，但在Text组件中无效。 因此，我不知道如何设置垂直对齐中心。

只有一种我知道的方法是在height组件中设置Text的大小，但这不是一个好方法...

我想知道为Text组件设置垂直对齐的正确方法。

Answer 1

<View style={{ flex: 1, alignItem: 'center' }}>
  <Text style={{ fontSize: 32 }}>Select</Text>
</View>

Answer 2

以您的视图样式添加justifyContent: 'center'。像这样修改您的代码：

<View style={{ height: 96, justifyContent: 'center' }}>
  <Text style={{ fontSize: 32 }}>Select</Text>
</View>