Como definir o texto <Text> para maiúsculas na reação nativa

86

Como definir <Text> some text </Text>como maiúsculas em react native

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

É preciso mostrar esse teste como TESTE.

react-native

— Thivya
fonte

20

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

— Ivan Chernykh

129

O suporte a textTransform do iOS foi adicionado ao react-native na versão 0.56. O suporte para Android textTransform foi adicionado na versão 0.59. Ele aceita uma destas opções:

Nenhum
maiúsculas
minúsculas
capitalizar

O commit real do iOS , o commit do Android e a documentação

Exemplo:

<View>
  <Text style={{ textTransform: 'uppercase'}}>
    This text should be uppercased.
  </Text>
  <Text style={{ textTransform: 'capitalize'}}>
    Mixed:{' '}
    <Text style={{ textTransform: 'lowercase'}}>
      lowercase{' '}
    </Text>
  </Text>
</View>

— Preto
fonte

113

@Cherniv Obrigado pela resposta

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

— Thivya
fonte

6

Esta não é realmente uma solução. E se eu quiser animar o texto para maiúsculas?

— Michal

16

@Michal como seria a animação de texto em maiúsculas, parece um efeito super legal, eu simplesmente não consigo imaginar agora.

— Noitidart 01 de

2

@Michal Use Lottie para fazer animações legais, mesmo com texto. Você pode criar animações personalizadas por meio do Adobe After Effects, exemplo .

— Yeshan Jay

6

Esta não é mais a resposta correta. Há um estilo padrão no React Native para transformação de texto. Por favor, verifique minha resposta abaixo.

— Preto,

5

A função React Native .toUpperCase () funciona bem em uma string, mas se você usou numbersou other non-string data types, ela não funciona. O errorterá ocorrido.

Abaixo de dois estão as propriedades da string:

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

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

— Najathi
fonte

0

use a propriedade de transformação de texto em sua tag de estilo

textTransform:'uppercase'

— bisma
fonte