Как установить текст <Text> в верхний регистр в React Native

86

Как установить <Text> some text </Text>верхний регистр в React Native

<Text style={{}}> Test </Text>

Необходимо показать этот тест как ТЕСТ.

react-native Тивья
источник
20
<Text style={{}}> {'Test'.toUpperCase()} </Text>
Иван Черных

Ответы:

129

Поддержка textTransform в iOS была добавлена ​​в react-native в версии 0.56. Поддержка Android textTransform была добавлена ​​в версии 0.59. Он принимает один из следующих вариантов:

  • никто
  • верхний регистр
  • строчная буква
  • извлекать выгоду

Фактические IOS фиксации , Android фиксации и документации

Пример:

<View>
  <Text style={{ textTransform: 'uppercase'}}>
    This text should be uppercased.
  </Text>
  <Text style={{ textTransform: 'capitalize'}}>
    Mixed:{' '}
    <Text style={{ textTransform: 'lowercase'}}>
      lowercase{' '}
    </Text>
  </Text>
</View>
Черный
источник
113

@Cherniv Спасибо за ответ

<Text style={{}}> {'Test'.toUpperCase()} </Text>
Тивья
источник
6
Это не совсем решение. Что, если я хочу преобразовать текст в верхний регистр?
Михал
16
@Michal, как бы выглядела текстовая анимация в верхнем регистре, это звучит как супер крутой эффект, я просто не могу себе представить его прямо сейчас.
Noitidart 01
2
@Michal Используйте Lottie для создания классных анимаций, даже с текстом. Вы можете создавать собственные анимации с помощью Adobe After Effects, Example .
Йешан Джей
6
Это уже неправильный ответ. В React Native есть стиль по умолчанию для преобразования текста. Пожалуйста, проверьте мой ответ ниже.
Блэк
5

Функция React Native .toUpperCase () отлично работает в строке, но если вы использовали numbersили other non-string data types, она не работает. errorБудет иметь место.

Ниже двух свойств строки: 

<Text>{props.complexity.toUpperCase()}</Text>

<Text>{props.affordability.toUpperCase()}</Text>
Наджати
источник
0

использовать свойство преобразования текста в теге стиля

textTransform:'uppercase'
бисма
источник