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

Respostas:

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