React Native: невозможно центрировать текст в компоненте View - PullRequest
Новая
       99

React Native: невозможно центрировать текст в компоненте View

1 голос
/ 18 февраля 2020

Я не могу центрировать компонент Text в компоненте View в React Native как на android, так и на ios.

Как видите, знак + не центрирован в белом круге .

enter image description here

Это мой компонент: 


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

Ответы [ 2 ]

0 голосов
/ 18 февраля 2020

Дополнительный отступ шрифта в android может быть виновником здесь. Попробуйте добавить includeFontPadding: false к стилю текста.

больше информации здесь - https://facebook.github.io/react-native/docs/text#style

includeFontPadding: bool (Android)

Устанавливается в false, чтобы удалить лишние отступы шрифта предназначен для освобождения места для определенных восходящих / спусковых устройств. Для некоторых шрифтов это заполнение может сделать текст немного смещенным при центрировании по вертикали. Для лучших результатов также установите textAlignVertical в центр. По умолчанию установлено значение true.

0 голосов
/ 18 февраля 2020

Можете ли вы попробовать мой код ниже:

Код компонента: 

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

Screenshot

...