Jak ustawić tekst <Text> na wielkie litery w reagowaniu natywnym

85

Jak ustawić <Text> some text </Text>wielkie litery w Reaguj natywnym

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

Musisz pokazać ten test jako TEST.

react-native

— Thivya
źródło

19

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

— Ivan Chernykh

125

Dodano obsługę textTransform dla systemu iOS w wersji 0.56 do react-native. W wersji 0.59 dodano obsługę Android textTransform. Akceptuje jedną z tych opcji:

Żaden
duże litery
małe litery
skapitalizować

Rzeczywiste iOS popełnić , Android popełnić i dokumentacja

Przykład:

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

— czarny
źródło

113

@Cherniv Dzięki za odpowiedź

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

— Thivya
źródło

6

To naprawdę nie jest rozwiązanie. A jeśli chcę animować tekst wielkimi literami?

— Michał

16

@Michal, jak wyglądałaby animacja tekstu wielkimi literami, to brzmi jak super fajny efekt, po prostu nie mogę sobie tego teraz wyobrazić.

— Noitidart

2

@Michal Użyj Lottie do robienia fajnych animacji, nawet z tekstem. Można tworzyć niestandardowe animacje pośrednictwem Adobe After Effects, przykład .

— Yeshan Jay

6

To już nie jest poprawna odpowiedź. W React Native istnieje domyślny styl transformacji tekstu. Proszę sprawdzić moją odpowiedź poniżej.

— Czarny

3

Funkcja React Native .toUpperCase () działa dobrze w ciągu znaków, ale jeśli użyłeś numberslub other non-string data types, nie działa. errorBędą miały miejsce.

Poniżej dwa znajdują się właściwości ciągu:

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

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

— Najathi
źródło