React Native 如何设置Text组件文本垂直居中答案

【问题标题】：ReactNative How to set Text component text vertical centerReact Native 如何设置Text组件文本垂直居中
【发布时间】：2020-02-27 00:50:51
【问题描述】：

当 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 组件中不起作用。所以，我不知道如何设置垂直对齐中心。

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：