Как установить текст <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'

— бисма
источник