Текст кнопки не выровнен по центру по вертикали.

Question

У меня проблема с выравниванием текста по центру кнопки, но она остается немного ниже точного центра.Я обнаружил includeFontPadding из документации с предложением некоторых расхождений с каким-либо сторонним шрифтом.

Шрифт выглядит корректно на устройствах iOS, но не правильно центрирован на Android.

https://facebook.github.io/react-native/docs/text-style-props#includefontpadding

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

<Button
    style={[style.button]} block >
     <Text>Setup Now</Text>
  </Button>

Стиль для кнопки:

export default {
  button: {
    elevation: null,
    shadowColor: null,
    shadowOffset: null,
    shadowOpacity: null,
    shadowRadius: null
  }
}

Answer 1

Вместо использования компонента Text внутри компонента Button.Используйте опору «title», как это определено в документации к кнопкам:

https://facebook.github.io/react-native/docs/button.html

Так что вы можете быть

<Button
    style={[style.button]} title="Setup Now" block >
  </Button>

Answer 2

Если вы используете кнопку реакции по умолчанию, то кнопка реагирования по умолчанию не поддерживает свойства стиля, а также вместо использования компонента Text внутри компонента Button.Используйте свойства "title", как это определено в официальной документации, для этого, пожалуйста, обратитесь по ссылке ниже

https://facebook.github.io/react-native/docs/button.html

Также отреагируйте родным, предоставьте различные варианты кнопки для вашей кнопки настройки и согласно вашейиспользуйте для этого, пожалуйста, ссылку ниже

https://facebook.github.io/react-native/docs/handling-touches

Пожалуйста, попробуйте это решение ниже, может помочь в вашей проблеме.

<TouchableOpacity
      activeOpacity={.5}
      style={styles.buttonStyle}>
      <Text style={styles.textStyle}>Setup Now</Text>
</TouchableOpacity>



buttonStyle: {
    padding: 14,
    backgroundColor: 'red',
    borderRadius: 6,
  },

  textStyle: {
    color: 'white',
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 16,
  },

Answer 3

Вы можете попытаться добавить некоторые стили к вашему тексту.На самом деле это упоминается прямо в том фрагменте, который вы цитировали из документов:

Для достижения наилучших результатов также установите textAlignVertical в центр.

<Text style={[style.text]}>Setup now</Text>

С этими стилями:

export default {
  button: {
    ...
  },
  text: {
    flex: 1,   // fill the button
    textAlign: 'center',
    textAlignVertical: 'center',  // this style is Android only
  }
}

Answer 4

или вы можете добавить стиль к своему тексту, например <Text style={styles.example}>TEST</Text>, а затем добавить к своим стилям

const styles = StyleSheet.create({ example: { text-align:'center', } })

возможно, это может помочь для вашей справки