Text

テキストを表示するためのReactコンポーネント。

Text は、ネスト、スタイリング、およびタッチ操作をサポートします。

次の例では、ネストされたタイトルと本文テキストは styles.baseText から fontFamily を継承しますが、タイトルは独自の追加スタイルを提供します。タイトルと本文は、リテラルの改行のために互いに積み重ねられます。

ネストされたテキスト

AndroidとiOSの両方で、文字列の範囲に太字や色付きテキストなどの特定の書式を設定することで、書式設定されたテキストを表示できます（iOSではNSAttributedString、AndroidではSpannableString）。実際には、これは非常に面倒です。React Nativeでは、これと同じ効果を実現するためにテキストをネストできるWebパラダイムを使用することにしました。

バックグラウンドでは、React Nativeはこれを、次の情報を含むフラットなNSAttributedStringまたはSpannableStringに変換します。

"I am bold and red"
0-9: bold
9-17: bold, red

コンテナ

<Text>要素はレイアウトに関して独自です。内部のすべては、Flexboxレイアウトを使用せず、テキストレイアウトを使用します。つまり、<Text>内の要素は長方形ではなくなり、行末になると折り返されます。

<Text>
  <Text>First part and </Text>
  <Text>second part</Text>
</Text>
// Text container: the text will be inline, if the space allows it
// |First part and second part|

// otherwise, the text will flow as if it was one
// |First part |
// |and second |
// |part       |

<View>
  <Text>First part and </Text>
  <Text>second part</Text>
</View>
// View container: each text is its own block
// |First part and|
// |second part   |

// otherwise, the text will flow in its own block
// |First part |
// |and        |
// |second part|

制限付きのスタイル継承

Webでは、ドキュメント全体のフォントファミリとサイズを設定する通常の方法は、次のように継承されたCSSプロパティを利用することです。

html {
  font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
  font-size: 11px;
  color: #141823;
}

ドキュメント内のすべての要素は、それらまたはそれらの親のいずれかが新しいルールを指定しない限り、このフォントを継承します。

React Nativeでは、これについてより厳格です。**<Text>コンポーネントの内側にすべてのテキストノードをラップする必要があります**。<View>の直下にテキストノードを配置することはできません。

// BAD: will raise exception, can't have a text node as child of a <View>
<View>
  Some text
</View>

// GOOD
<View>
  <Text>
    Some text
  </Text>
</View>

また、サブツリー全体のデフォルトフォントを設定する機能も失われます。一方、fontFamilyはCSSのfont-familyとは異なり、単一のフォント名のみを受け入れます。アプリケーション全体で一貫性のあるフォントとサイズを使用する推奨される方法は、それらを含むコンポーネントMyAppTextを作成し、アプリケーション全体でこのコンポーネントを使用することです。このコンポーネントを使用して、他の種類のテキスト用にMyAppHeaderTextのようなより具体的なコンポーネントを作成することもできます。

<View>
  <MyAppText>
    Text styled with the default font for the entire application
  </MyAppText>
  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>

MyAppTextが、スタイル設定されたTextコンポーネントにのみその子をレンダリングするコンポーネントであると仮定すると、MyAppHeaderTextは次のように定義できます。

const MyAppHeaderText = ({children}) => {
  return (
    <MyAppText>
      <Text style={{fontSize: 20}}>{children}</Text>
    </MyAppText>
  );
};

このようにMyAppTextを構成することで、トップレベルコンポーネントからスタイルを取得できますが、特定のユースケースでそれらを追加/オーバーライドする機能が残されます。

React Nativeには依然としてスタイルの継承の概念がありますが、テキストサブツリーに限定されます。この場合、2番目の部分は太字と赤の両方になります。

<Text style={{fontWeight: 'bold'}}>
  I am bold
  <Text style={{color: 'red'}}>and red</Text>
</Text>

このより制約されたテキストのスタイル設定方法がより良いアプリを生み出すと信じています。

(開発者) Reactコンポーネントは、強力な分離を念頭に置いて設計されています。propsが同じである限り、アプリケーションのどこにでもコンポーネントをドロップでき、同じように見え、同じように動作すると信頼できる必要があります。propsの外部から継承できるテキストプロパティは、この分離を破ることになります。
(実装者) React Nativeの実装も簡素化されています。すべての要素にfontFamilyフィールドを設定する必要はなく、テキストノードを表示するたびにルートまでツリーを潜在的にトラバースする必要もありません。スタイルの継承は、ネイティブのTextコンポーネント内にのみエンコードされており、他のコンポーネントやシステム自体に漏洩することはありません。

リファレンス

プロパティ

`accessibilityHint`

アクセシビリティヒントは、アクセシビリティラベルから結果が明確でない場合に、アクセシビリティ要素に対してアクションを実行したときに何が起こるかをユーザーが理解するのに役立ちます。

型
文字列

`accessibilityLanguage`
iOS

ユーザーが要素を操作するときに、スクリーンリーダーで使用する必要がある言語を示す値。 BCP 47仕様に従う必要があります。

詳細については、iOSのaccessibilityLanguageドキュメントを参照してください。

型
文字列

`accessibilityLabel`

ユーザーが要素を操作するときに、スクリーンリーダーによって読み取られるテキストをオーバーライドします。デフォルトでは、ラベルは、すべての子をトラバースし、スペースで区切られたすべてのTextノードを累積することによって構成されます。

型
文字列

`accessibilityRole`

現在フォーカスされている要素を特定の役割を持っているものとして扱うように、スクリーンリーダーに指示します。

iOSでは、これらの役割は対応するアクセシビリティ特性にマッピングされます。画像ボタンには、「画像」と「ボタン」の両方に特性が設定されている場合と同じ機能があります。詳細については、アクセシビリティガイドを参照してください。

Androidでは、これらの役割は、iOSのVoiceoverでアクセシビリティ特性を追加するのと同様の機能をTalkBackに備えています。

型
AccessibilityRole

`accessibilityState`

現在フォーカスされている要素を特定の状態にあるものとして扱うように、スクリーンリーダーに指示します。

1つの状態、状態なし、または複数の状態を指定できます。状態は、オブジェクト（例：{selected: true, disabled: true}）を介して渡す必要があります。

型
AccessibilityState

`accessibilityActions`

アクセシビリティアクションを使用すると、支援技術がコンポーネントのアクションをプログラムで呼び出すことができます。accessibilityActionsプロパティには、アクションオブジェクトのリストを含める必要があります。各アクションオブジェクトには、フィールド名とラベルを含める必要があります。

詳細については、アクセシビリティガイドを参照してください。

型	必須
配列	いいえ

`onAccessibilityAction`

ユーザーがアクセシビリティアクションを実行したときに呼び出されます。この関数への唯一の引数は、実行するアクションの名前を含むイベントです。

詳細については、アクセシビリティガイドを参照してください。

型	必須
関数	いいえ

`accessible`

trueに設定すると、ビューがアクセシビリティ要素であることを示します。

詳細については、アクセシビリティガイドを参照してください。

型	デフォルト
ブール値	`true`

`adjustsFontSizeToFit`

フォントが、指定されたスタイルの制約に合わせて自動的に縮小されるかどうかを指定します。

型	デフォルト
ブール値	`false`

`allowFontScaling`

フォントが、テキストサイズのアクセシビリティ設定を尊重して拡大縮小されるかどうかを指定します。

型	デフォルト
ブール値	`true`

`android_hyphenationFrequency`
Android

Android API Level 23以降でワードブレークを決定する際に使用する自動ハイフネーションの頻度を設定します。

型	デフォルト
enum(`'none'`, `'normal'`,`'full'`)	`'none'`

`aria-busy`

要素が変更されていること、および支援技術が、更新についてユーザーに通知する前に変更が完了するまで待機する必要がある場合があることを示します。

型	デフォルト
ブール値	false

`aria-checked`

チェック可能な要素の状態を示します。このフィールドには、ブール値または「混合」チェックボックスを表す「mixed」文字列を使用できます。

型	デフォルト
ブール値, 'mixed'	false

`aria-disabled`

要素が知覚可能だが無効であり、編集や操作ができない状態であることを示します。

型	デフォルト
ブール値	false

`aria-expanded`

展開可能な要素が現在展開されているか折りたたまれているかを示します。

型	デフォルト
ブール値	false

`aria-label`

インタラクティブな要素にラベルを付ける文字列値を定義します。

型
文字列

`aria-selected`

選択可能な要素が現在選択されているかどうかを示します。

型
ブール値

`dataDetectorType`
Android

テキスト要素内でクリック可能なURLに変換されるデータの種類を決定します。デフォルトでは、データ型は検出されません。

指定できる型は1つのみです。

型	デフォルト
enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`)	`'none'`

`disabled`
Android

テスト目的で、テキストビューの無効状態を指定します。

型	デフォルト
bool	`false`

`dynamicTypeRamp`
iOS

iOSでこの要素に適用するダイナミックタイプランプ。

型	デフォルト
enum(`'caption2'`, `'caption1'`, `'footnote'`, `'subheadline'`, `'callout'`, `'body'`, `'headline'`, `'title3'`, `'title2'`, `'title1'`, `'largeTitle'`)	`'body'`

`ellipsizeMode`

numberOfLinesが設定されている場合、このプロパティはテキストがどのように切り捨てられるかを定義します。numberOfLinesはこのプロパティと組み合わせて設定する必要があります。

これは、次のいずれかの値になります

head - 行の末尾がコンテナに収まるように表示され、行の先頭の欠落したテキストは省略記号で示されます。例："...wxyz"
middle - 行の最初と最後がコンテナに収まるように表示され、中央の欠落したテキストは省略記号で示されます。「ab...yz」
tail - 行の先頭がコンテナに収まるように表示され、行の末尾の欠落したテキストは省略記号で示されます。例：「abcd...」
clip - 行はテキストコンテナの端を超えて描画されません。

Androidでは、numberOfLinesが1より大きい値に設定されている場合、tailの値のみが正しく機能します。

型	デフォルト
enum(`'head'`, `'middle'`, `'tail'`, `'clip'`)	`tail`

`id`

ネイティブコードからこのビューを特定するために使用されます。nativeIDプロパティよりも優先されます。

型
文字列

`maxFontSizeMultiplier`

allowFontScalingが有効になっているときに、フォントが到達できる最大のスケールを指定します。可能な値

null/undefined: 親ノードまたはグローバルなデフォルト（0）から継承します。
0: 最大値なし、親/グローバルデフォルトを無視
>= 1: このノードのmaxFontSizeMultiplierをこの値に設定します。

型	デフォルト
number	`undefined`

`minimumFontScale`
iOS

adjustsFontSizeToFitが有効になっているときに、フォントが到達できる最小のスケールを指定します。（値は0.01〜1.0）。

型
number

`nativeID`

ネイティブコードからこのビューを特定するために使用されます。

型
文字列

`numberOfLines`

行の折り返しを含むテキストレイアウトの計算後、行の合計数がこの数を超えないように、省略記号でテキストを切り捨てるために使用されます。このプロパティを0に設定すると、この値が設定解除され、行の制限が適用されないことを意味します。

このプロパティは、通常ellipsizeModeとともに使用されます。

型	デフォルト
number	`0`

`onLayout`

マウント時およびレイアウト変更時に呼び出されます。

型
`({nativeEvent: LayoutEvent}) => void`

`onLongPress`

この関数は、長押し時に呼び出されます。

型
`({nativeEvent: PressEvent}) => void`

`onMoveShouldSetResponder`

このビューはタッチ応答を「要求」しますか？これは、Viewがレスポンダーではない場合、すべてのタッチ移動で呼び出されます。

型
`({nativeEvent: PressEvent}) => boolean`

`onPress`

ユーザーの押下時に呼び出される関数。onPressOutの後にトリガーされます。

型
`({nativeEvent: PressEvent}) => void`

`onPressIn`

タッチが開始された直後、onPressOutとonPressの前に呼び出されます。

型
`({nativeEvent: PressEvent}) => void`

`onPressOut`

タッチが解放されたときに呼び出されます。

型
`({nativeEvent: PressEvent}) => void`

`onResponderGrant`

Viewはタッチイベントに応答しています。これは、ハイライト表示して、ユーザーに何が起こっているかを示すタイミングです。

Androidでは、このコールバックからtrueを返すと、このレスポンダーが終了するまで他のネイティブコンポーネントがレスポンダーになるのを防ぐことができます。

型
`({nativeEvent: PressEvent}) => void ｜ boolean`

`onResponderMove`

ユーザーが指を動かしています。

型
`({nativeEvent: PressEvent}) => void`

`onResponderRelease`

タッチの終わりに発火します。

型
`({nativeEvent: PressEvent}) => void`

`onResponderTerminate`

レスポンダーはViewから奪われました。onResponderTerminationRequestの呼び出し後に他のビューによって奪われるか、要求なしにOSによって奪われる場合があります（例：iOSのコントロールセンター/通知センターで発生します）。

型
`({nativeEvent: PressEvent}) => void`

`onResponderTerminationRequest`

他のViewがレスポンダーになろうとしており、このViewにレスポンダーを解放するように求めています。trueを返すと、解放が許可されます。

型
`({nativeEvent: PressEvent}) => boolean`

`onStartShouldSetResponderCapture`

親Viewがタッチ開始時に子Viewがレスポンダーになるのを防ぎたい場合は、trueを返すこのハンドラーが必要です。

型
`({nativeEvent: PressEvent}) => boolean`

`onTextLayout`

テキストレイアウトの変更時に呼び出されます。

型
(`TextLayoutEvent`) => mixed

`pressRetentionOffset`

スクロールビューが無効になっている場合、これはボタンを非アクティブ化する前にタッチがボタンからどれだけ離れて移動できるかを定義します。非アクティブ化されたら、戻してみると、ボタンが再びアクティブ化されることがわかります。スクロールビューが無効になっている間、何度も前後に動かしてみてください。メモリ割り当てを減らすために、定数を渡すようにしてください。

型
Rect, number

`role`

roleは、支援技術のユーザーにコンポーネントの目的を伝えます。accessibilityRoleプロパティよりも優先されます。

型
役割

`selectable`

ユーザーがテキストを選択して、ネイティブのコピーアンドペースト機能を使用できるようにします。

型	デフォルト
ブール値	`false`

`selectionColor`
Android

テキストのハイライト色。

型
color

`style`

型
テキストスタイル, ビュースタイルプロパティ

`suppressHighlighting`
iOS

trueの場合、テキストが押されたときに視覚的な変更は行われません。デフォルトでは、グレーの楕円が押下時にテキストをハイライト表示します。

型	デフォルト
ブール値	`false`

`testID`

エンドツーエンドテストでこのビューを特定するために使用されます。

型
文字列

`textBreakStrategy`
Android

Android APIレベル23以上でテキストの改行戦略を設定します。可能な値は、simple、highQuality、balancedです。

型	デフォルト
enum(`'simple'`, `'highQuality'`, `'balanced'`)	`highQuality`

`lineBreakStrategyIOS`
iOS

iOS 14+で改行戦略を設定します。可能な値はnone、standard、hangul-word、push-outです。

型	デフォルト
enum(`'none'`, `'standard'`, `'hangul-word'`, `'push-out'`)	`'none'`

型定義

TextLayout

TextLayoutオブジェクトは、TextLayoutEventコールバックの一部であり、Text行の測定データを含みます。

例

{
    capHeight: 10.496,
    ascender: 14.624,
    descender: 4,
    width: 28.224,
    height: 18.624,
    xHeight: 6.048,
    x: 0,
    y: 0
}

プロパティ

名前	型	オプション	説明
ascender	number	いいえ	テキストレイアウト変更後の行のアセンダーの高さ。
capHeight	number	いいえ	ベースラインより上の大文字の高さ。
descender	number	いいえ	テキストレイアウト変更後の行のディセンダーの高さ。
height	number	いいえ	テキストレイアウト変更後の行の高さ。
width	number	いいえ	テキストレイアウト変更後の行の幅。
x	number	いいえ	Textコンポーネント内の行のX座標。
xHeight	number	いいえ	ベースラインと行の中央値（コーパスサイズ）の間の距離。
y	number	いいえ	Textコンポーネント内の行のY座標。

TextLayoutEvent

TextLayoutEventオブジェクトは、コンポーネントのレイアウト変更の結果としてコールバックで返されます。これには、レンダリングされたすべてのテキスト行に対応するTextLayoutオブジェクトを含む配列であるlinesというキーが含まれます。

例

{
  lines: [
    TextLayout,
    TextLayout,
    // ...
  ];
  target: 1127;
}

プロパティ

名前	型	オプション	説明
lines	TextLayoutの配列	いいえ	レンダリングされたすべての行のTextLayoutデータを提供します。
target	number	いいえ	要素のノードID。

ネストされたテキスト
コンテナ
限定的なスタイルの継承
プロパティ
型定義
- テキストレイアウト
- TextLayoutEvent

ネストされたテキスト​

コンテナ​

制限付きのスタイル継承​

リファレンス

プロパティ​

accessibilityHint​

accessibilityLanguage iOS​

accessibilityLabel​

accessibilityRole​

accessibilityState​

accessibilityActions​

onAccessibilityAction​

accessible​

adjustsFontSizeToFit​

allowFontScaling​

android_hyphenationFrequency Android​

aria-busy​

aria-checked​

aria-disabled​

aria-expanded​

aria-label​

aria-selected​

dataDetectorType Android​

disabled Android​

dynamicTypeRamp iOS​

ellipsizeMode​

id​

maxFontSizeMultiplier​

minimumFontScale iOS​

nativeID​

numberOfLines​

onLayout​

onLongPress​

onMoveShouldSetResponder​

onPress​

onPressIn​

onPressOut​

onResponderGrant​

onResponderMove​

onResponderRelease​

onResponderTerminate​

onResponderTerminationRequest​

onStartShouldSetResponderCapture​

onTextLayout​

pressRetentionOffset​

role​

selectable​

selectionColor Android​

style​

suppressHighlighting iOS​

testID​

textBreakStrategy Android​

lineBreakStrategyIOS iOS​

型定義​

TextLayout​

例​

プロパティ​

TextLayoutEvent​

例​

プロパティ​

ネストされたテキスト

コンテナ

制限付きのスタイル継承

プロパティ

`accessibilityHint`

`accessibilityLanguage`
iOS

`accessibilityLabel`

`accessibilityRole`

`accessibilityState`

`accessibilityActions`

`onAccessibilityAction`

`accessible`

`adjustsFontSizeToFit`

`allowFontScaling`

`android_hyphenationFrequency`
Android

`aria-busy`

`aria-checked`

`aria-disabled`

`aria-expanded`

`aria-label`

`aria-selected`

`dataDetectorType`
Android

`disabled`
Android

`dynamicTypeRamp`
iOS

`ellipsizeMode`

`id`

`maxFontSizeMultiplier`

`minimumFontScale`
iOS

`nativeID`

`numberOfLines`

`onLayout`

`onLongPress`

`onMoveShouldSetResponder`

`onPress`

`onPressIn`

`onPressOut`

`onResponderGrant`

`onResponderMove`

`onResponderRelease`

`onResponderTerminate`

`onResponderTerminationRequest`

`onStartShouldSetResponderCapture`

`onTextLayout`

`pressRetentionOffset`

`role`

`selectable`

`selectionColor`
Android

`style`

`suppressHighlighting`
iOS

`testID`

`textBreakStrategy`
Android

`lineBreakStrategyIOS`
iOS

型定義

TextLayout

例

プロパティ

TextLayoutEvent

例

プロパティ