React Native - проблема с преобразованием текста в симуляторе Android

#android #reactjs #react-native

#Android #reactjs #react-native

Вопрос:

Известна ли проблема с TextTransform:’uppercase’ в Android?

Я довольно новичок в React native и только что закончил создавать представления, все выглядело великолепно в Ios, но на Android — текст кнопки не отображается. После серии проб и ошибок я обнаружил, что проблема, похоже, в textTransform:’uppercase’, если я удалю это из таблицы стилей, текст отобразится нормально.

Кто-нибудь сталкивался с этим? Я не могу найти какую-либо информацию об ошибке в Интернете.

Это мой код:

 return (
  <View style={AppStyles.buttonRect} >

    <View style={AppStyles.buttonRectWrap}>

      <Image style={AppStyles.buttonRectIcon} source={this.props.buttonIcon} />

      <Text style={AppStyles.btnText}>{this.props.buttonTxt}</Text>
    </View >
  </View>
);

в стиле :

 btnText:{
color:'#fff',
marginRight:14,
marginLeft:10,
fontSize:20,
alignSelf: 'center',
marginTop:-3,
textTransform:'uppercase',
},

что приводит к —

Если я удалю строку преобразования:

Я пробовал с несколькими симуляторами и получаю ту же ошибку.

1. Похоже, это известная ошибка: github.com/facebook/react-native/issues/21966

2. это объясняет это — если вы хотите добавить в качестве ответа, я; поставлю вам галочку @Christ Stillwell . приветствия

Ответ №1:

В настоящее время это ошибка с React Native. Похоже, что исправление находится в версии 0.59.0, поскольку кандидаты на выпуск 0.59.0 не содержат ошибки. Источник: https://github.com/facebook/react-native/issues/21966

Ответ №2:

Существует известная проблема. По сути, использование textTransform нарушает стиль текста для Android. Даже textTransform: none не нарушит ваш стиль. Ссылка на проблему:https://github.com/facebook/react-native/issues/21966

Ответ №3:

Я сталкиваюсь с той же проблемой с react native версии 0.58.5, похоже, это хорошо известная ошибка. Попробуйте пока использовать обычный JS для заглавных строк:

capitalizeString = (текст: строка) => тип текста === ‘string’ amp;amp; text.длина > 0 amp;amp; ${text[0].toUpperCase()}${text.slice(1)}

capitalizeString(‘mystring’)

или просто: string.toUpperCase();

ссылка:https://github.com/facebook/react-native/issues/21966

Ответ №4:

Решение этой проблемы, которое я нашел, заключалось в создании компонента, который отображает props.children и связывает метод .toUpperCase.

react-native text-преобразование верхнего регистра