React Native：无法在视图组件中居中文本答案

【问题标题】：React Native: Unable to center Text in View componentReact Native：无法在视图组件中居中文本
【发布时间】：2020-02-18 05:49:38
【问题描述】：

我无法在 android 和 ios 上的 React Native 中居中 Text 组件中的 View 组件.

如您所见，+ 登录不在白色圆圈的中心。

这是我的组件：


<TouchableOpacity
    style={styles.blueButton}
>
    <View style={styles.addButton}>
        <Text style={styles.plus}>+</Text>
    </View>
</TouchableOpacity>

这是我的样式表：

blueButton: {
    height: 40,
    width: 40,
    borderRadius: 3,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#3498DB',
},
addButton: {
    width: 15,
    height: 15,
    borderRadius: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
},
plus: {
    color: '#3498DB',
    fontSize: 20,
},

【问题讨论】：

你能像屏幕截图一样用蓝色显示你的视图吗？
当然，我也添加了蓝色按钮。

标签： reactjs react-native text-alignment react-native-stylesheet

【解决方案1】：

你能试试我下面的代码吗：

组件代码：

<View style={styles.addButtonBlue}>
  <View style={styles.addButton}>
    <Text style={styles.plus}>+</Text>
  </View>
</View>

样式表代码

addButtonBlue: {
  width: 70,
  height: 70,
  borderRadius: 10,
  justifyContent: 'center',
  alignContent: 'center',
  alignItems: 'center',
  backgroundColor: '#3498db',
},
addButton: {
  width: 30,
  height: 30,
  borderRadius: 30,
  justifyContent: 'center',
  alignContent: 'center',
  alignItems: 'center',
  backgroundColor: '#fff',
},
plus: {
    color: '#3498DB',
},

【讨论】：

您好，您的解决方案不适用于尺寸为 15 像素的 addButton。
让我检查一下..你能用蓝色的视图显示你的视图，就像截图中的设计一样吗？
当然，我也添加了蓝色按钮。
但是当我将 addButton 宽度和高度更改为 15 时它确实对我有用，无论如何你更新你的问题，我会检查
@VinaySharma 它对我有用，兄弟.. 你还有问题吗？

【解决方案2】：

android 中额外的字体填充可能是这里的罪魁祸首。尝试在文本样式中添加includeFontPadding: false。

更多信息在这里 - https://facebook.github.io/react-native/docs/text#style

includeFontPadding: bool (Android)

设置为 false 以删除额外的字体填充，以便为某些上升/下降。对于某些字体，这种填充可以使垂直居中时，文本看起来略微未对齐。为了最好结果还将 textAlignVertical 设置为居中。默认为真。

【讨论】：