reactjs - React Native：无法在视图组件中居中文本

Question

我无法在android和ios上的React Native中将组件居中。TextView

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

这是我的组件：

<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,
},

Answer 1

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

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

includeFontPadding: bool (Android)

设置为 false 以删除额外的字体填充，以便为某些上升/下降腾出空间。对于某些字体，此填充可以使文本在垂直居中时看起来略微错位。为了获得最佳结果，还将 textAlignVertical 设置为居中。默认为真。

Answer 2

你可以试试我下面的代码：

组件代码：

<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',
},