So setzen Sie <Text> -Text in Großbuchstaben auf Großbuchstaben

86

So setzen Sie <Text> some text </Text>als Großbuchstaben in React Native

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

Müssen diesen Test als TEST zeigen.

react-native

— Thivya
quelle

20

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

— Ivan Chernykh

128

Die Unterstützung von iOS textTransform wurde in der Version 0.56 hinzugefügt, um reaktionsnativ zu sein. Die Unterstützung für Android textTransform wurde in der Version 0.59 hinzugefügt. Es akzeptiert eine dieser Optionen:

keiner
Großbuchstaben
Kleinbuchstaben
profitieren

Das eigentliche iOS-Commit , Android-Commit und die Dokumentation

Beispiel:

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

— Schwarz
quelle

113

@Cherniv Danke für die Antwort

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

— Thivya
quelle

6

Dies ist keine wirkliche Lösung. Was ist, wenn ich Text in Großbuchstaben animieren möchte?

— Michal

16

@Michal Wie würde eine Textanimation in Großbuchstaben aussehen? Es klingt nach einem super coolen Effekt, den ich mir momentan einfach nicht vorstellen kann.

— Noitidart

2

@Michal Verwenden Sie Lottie , um coole Animationen zu erstellen , auch mit Text. Sie können benutzerdefinierte Animationen über Adobe After Effects, Beispiel, erstellen .

— Yeshan Jay

6

Dies ist keine richtige Antwort mehr. In React Native gibt es einen Standardstil für die Texttransformation. Bitte überprüfen Sie meine Antwort unten.

— Schwarz

3

React Native .toUpperCase () -Funktion funktioniert gut in einer Zeichenfolge, aber wenn Sie das numbersoder verwendet haben other non-string data types, funktioniert es nicht. Das errorwird aufgetreten sein.

Unten Zwei sind Zeichenfolgeneigenschaften:

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

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

— Najathi
quelle