Як встановити для тексту <Text> верхній регістр у рідній реакції

85

Як встановити <Text> some text </Text>як верхній регістр у рідній реакції

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

Потрібно показати цей тест як ТЕСТ.

react-native

— Тівія
джерело

19

<Text style={{}}> {'Test'.toUpperCase()} </Text>

— Іван Черних

125

Підтримка iOS textTransform додана до реакції рідної у версії 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

2

@Michal Використовуйте Lottie, щоб робити круті анімації, навіть із текстом. Ви можете створювати власні анімації через Adobe After Effects, Приклад .

— Yeshan Jay

6

Це вже не правильна відповідь. У React Native є стиль за замовчуванням для перетворення тексту. Будь ласка, перевірте мою відповідь нижче.

— Чорний

3

Функція React Native .toUpperCase () чудово працює у рядку, але якщо ви використовували numbersабо other non-string data types, це не працює. errorМатиме місце.

Нижче до двох наведені властивості рядка:

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

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

— Наджаті
джерело