Come impostare il testo <Testo> in maiuscolo in React Native

86

Come impostare <Text> some text </Text>come maiuscolo in React Native

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

È necessario mostrare il test come TEST.

react-native

— Thivya
fonte

20

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

— Ivan Chernykh

129

Il supporto di iOS textTransform è stato aggiunto a react-native nella versione 0.56. Il supporto di Android textTransform è stato aggiunto nella versione 0.59. Accetta una di queste opzioni:

nessuna
maiuscolo
minuscolo
capitalizzare

Il commit iOS effettivo , il commit Android e la documentazione

Esempio:

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

— Nero
fonte

113

@Cherniv Grazie per la risposta

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

— Thivya
fonte

6

Questa non è davvero una soluzione. E se volessi animare il testo in maiuscolo?

— Michal

16

@Michal come sarebbe l'animazione del testo in lettere maiuscole, sembra un effetto fantastico che non riesco proprio a immaginarlo in questo momento.

— Noitidart

2

@Michal Usa Lottie per realizzare fantastiche animazioni, anche con il testo. Puoi creare animazioni personalizzate tramite Adobe After Effects, Example .

— Yeshan Jay,

6

Questa non è più la risposta corretta. C'è uno stile predefinito in React Native per la trasformazione del testo. Per favore controlla la mia risposta qui sotto.

— Nero

5

La funzione React Native .toUpperCase () funziona bene in una stringa ma se hai usato numberso other non-string data types, non funziona. Il errorsarà accaduto.

Di seguito due sono le proprietà della stringa:

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

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

— Najathi
fonte

0

usa la proprietà di trasformazione del testo nel tuo tag di stile

textTransform:'uppercase'

— bisma
fonte