React Native：無法在視圖組件中居中文本

Question

我無法在android和ios上將 React Native 的View組件中的Text組件居中。

正如您所看到的， +符號不在白色圓圈的中心。

這是我的組件：

<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

你可以試試我下面的代碼：

組件代碼：

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

Answer 2

android 中額外的字體填充可能是這里的罪魁禍首。 嘗試將includeFontPadding: false添加到文本樣式。

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

includeFontPadding: bool (Android)

設置為 false 以刪除旨在為某些上升/下降空間騰出空間的額外字體填充。 對於某些字體，當垂直居中時，這種填充會使文本看起來略微錯位。 為了獲得最佳結果，還將 textAlignVertical 設置為居中。 默認為真。