反応ネイティブで<Text>テキストを大文字に設定する方法

86

<Text> some text </Text>反応ネイティブで大文字として設定する方法

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

そのテストをTESTとして表示する必要があります。

react-native

— ティヴィア
ソース

20

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

— Ivan Chernykh 2016年

129

iOSのtextTransformサポートが0.56バージョンのreact-nativeに追加されました。AndroidtextTransformのサポートが0.59バージョンで追加されました。次のいずれかのオプションを受け入れます。

なし
大文字
小文字
大文字にする

実際のiOSコミット、Androidコミット、およびドキュメント

例：

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

— ブラック
ソース

113

@Cherniv回答ありがとうございます

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

— ティヴィア
ソース

6

これは実際には解決策ではありません。テキストを大文字にアニメートしたい場合はどうすればよいですか？

— ミハル2017

16

@Michal大文字のテキストアニメーションはどのように見えるか、それは私が今それを想像することができない超クールな効果のように聞こえます。

— noitidart 2017年

2

@Michal Lottieを使用して、テキストを使用する場合でもクールなアニメーションを作成します。Adobe After Effects、Exampleを介してカスタムアニメーションを作成できます。

— イェシャンジェイ2018

6

これはもう正解ではありません。React Nativeには、テキスト変換用のデフォルトのスタイルがあります。以下の私の答えを確認してください。

— 黒

5

React Native .toUpperCase（）関数は文字列で正常に機能しますが、numbersまたはを使用した場合は機能other non-string data typesしません。error発生しています。

以下の2つは文字列のプロパティです。

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

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

— ナジャティ
ソース

0

スタイルタグでテキスト変換プロパティを使用する

textTransform:'uppercase'

— ビスマ
ソース