View

UI構築のための最も基本的なコンポーネントであるViewは、flexbox、スタイル、タッチ処理、およびアクセシビリティコントロールをサポートするコンテナです。Viewは、React Nativeが実行されているプラットフォーム（UIView、<div>、android.viewなど）のネイティブビューに直接マップされます。

Viewは他のビューの中にネストするように設計されており、0個以上の任意の種類の子を持つことができます。

この例では、色付きの2つのボックスとテキストコンポーネントをパディング付きの行に配置するViewを作成します。

Viewは、明瞭性とパフォーマンスのためにStyleSheetと共に使用することをお勧めしますが、インラインスタイルもサポートされています。

合成タッチイベント

Viewのresponderプロパティ（例：onResponderMove）に対して渡される合成タッチイベントは、PressEventの形式です。

参照

プロパティ

`accessibilityActions`

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

アクセシビリティガイドで詳細情報をご覧ください。

型
配列

`accessibilityElementsHidden`
iOS

このアクセシビリティ要素に含まれるアクセシビリティ要素が非表示かどうかを示す値。デフォルトはfalseです。

アクセシビリティガイドで詳細情報をご覧ください。

型
bool

`accessibilityHint`

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

型
文字列

`accessibilityLanguage`
iOS

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

iOSのaccessibilityLanguageドキュメントで詳細情報をご覧ください。

型
文字列

`accessibilityIgnoresInvertColors`
iOS

色の反転が有効になっている場合に、このビューを反転するかどうかを示す値。trueの値は、色の反転が有効になっている場合でも、ビューを反転しないように指示します。

アクセシビリティガイドで詳細情報をご覧ください。

型
bool

`accessibilityLabel`

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

型
文字列

`accessibilityLiveRegion`
Android

アクセシビリティサービスに対して、このビューが変更されたときにユーザーに通知する必要があるかどうかを示します。Android API >= 19でのみ機能します。可能な値

'none' - アクセシビリティサービスはこのビューの変更を発表しません。
'polite' - アクセシビリティサービスはこのビューの変更を発表します。
'assertive' - アクセシビリティサービスは進行中の音声に割り込み、このビューの変更をすぐに発表します。

AndroidのViewドキュメントを参照してください。

型
enum('none', 'polite', 'assertive')

`accessibilityRole`

accessibilityRoleは、支援技術のユーザーにコンポーネントの目的を伝えます。

accessibilityRoleは次のいずれかになります。

'none' - 要素に役割がない場合に使用します。
'button' - 要素をボタンとして扱う場合に使用します。
'link' - 要素をリンクとして扱う場合に使用します。
'search' - テキストフィールド要素を検索フィールドとしても扱う場合に使用します。
'image' - 要素を画像として扱う場合に使用します。例として、ボタンやリンクと組み合わせることができます。
'keyboardkey' - 要素がキーボードキーとして機能する場合に使用します。
'text' - 要素を変更できない静的なテキストとして扱う場合に使用します。
'adjustable' - 要素を「調整」できる場合（例：スライダー）に使用します。
'imagebutton' - 要素をボタンとして扱い、画像でもある場合に使用します。
'header' - 要素がコンテンツセクションの見出しとして機能する場合（例：ナビゲーションバーのタイトル）に使用します。
'summary' - アプリが最初に起動したときに、アプリの現在の状況の簡単な概要を提供するために要素を使用できる場合に使用します。
'alert' - 要素にユーザーに提示する重要なテキストが含まれている場合に使用します。
'checkbox' - 要素がチェックボックスを表し、チェック済み、チェック解除済み、または混合チェック状態を持つことができる場合に使用します。
'combobox' - 要素がコンボボックスを表し、ユーザーが複数の選択肢から選択できる場合に使用します。
'menu' - コンポーネントが選択肢のメニューである場合に使用します。
'menubar' - コンポーネントが複数のメニューのコンテナである場合に使用します。
'menuitem' - メニュー内のアイテムを表すために使用します。
'progressbar' - タスクの進捗状況を示すコンポーネントを表すために使用します。
'radio' - ラジオボタンを表すために使用します。
'radiogroup' - ラジオボタンのグループを表すために使用します。
'scrollbar' - スクロールバーを表すために使用します。
'spinbutton' - 選択肢のリストを開くボタンを表すために使用します。
'switch' - オンとオフを切り替えることができるスイッチを表すために使用します。
'tab' - タブを表すために使用します。
'tablist' - タブのリストを表すために使用します。
'timer' - タイマーを表すために使用します。
'toolbar' - ツールバー（アクションボタンまたはコンポーネントのコンテナ）を表すために使用します。
'grid' - ScrollView、VirtualizedList、FlatList、またはSectionListと共にグリッドを表すために使用します。Android GridView にグリッドへの入出力を発表する機能を追加します。

型
文字列

`accessibilityState`

支援技術のユーザーにコンポーネントの現在の状態を記述します。

アクセシビリティガイドで詳細情報をご覧ください。

型
オブジェクト: `{disabled: bool, selected: bool, checked: bool または 'mixed', busy: bool, expanded: bool}`

`accessibilityValue`

コンポーネントの現在の値を表します。コンポーネントの値のテキスト説明、またはスライダーやプログレスバーなどの範囲ベースのコンポーネントの場合は、範囲情報（最小値、現在値、最大値）が含まれます。

アクセシビリティガイドで詳細情報をご覧ください。

型
オブジェクト: `{min: 数値, max: 数値, now: 数値, text: 文字列}`

`accessibilityViewIsModal`
iOS

VoiceOverがレシーバーの兄弟であるビュー内の要素を無視するかどうかを示す値。デフォルトはfalseです。

アクセシビリティガイドで詳細情報をご覧ください。

型
bool

`accessible`

trueの場合、ビューがアクセシビリティ要素であることを示します。デフォルトでは、すべてのタッチ可能な要素がアクセス可能です。

`aria-busy`

要素が変更されており、支援技術は変更が完了するまで待機してから、ユーザーに変更について通知することをお勧めします。

型	デフォルト
ブール値	false

`aria-checked`

チェック可能な要素の状態を示します。このフィールドは、ブール値または混合チェックボックスを表す文字列 "mixed" のいずれかを取ることができます。

型	デフォルト
boolean, 'mixed'	false

`aria-disabled`

要素が認識可能だが無効であることを示します。そのため、編集したり操作したりすることはできません。

型	デフォルト
ブール値	false

`aria-expanded`

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

型	デフォルト
ブール値	false

`aria-hidden`

このアクセシビリティ要素に含まれるアクセシビリティ要素が非表示かどうかを示します。

たとえば、兄弟ビューAとBを含むウィンドウで、ビューBのaria-hiddenをtrueに設定すると、VoiceOverはビューBの要素を無視します。

型	デフォルト
ブール値	false

`aria-label`

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

型
文字列

`aria-labelledby`
Android

適用されている要素にラベルを付ける要素を識別します。aria-labelledbyの値は、関連する要素のnativeIDと一致する必要があります。

<View>
  <Text nativeID="formLabel">Label for Input Field</Text>
  <TextInput aria-label="input" aria-labelledby="formLabel" />
</View>

型
文字列

`aria-live`
Android

要素が更新されることを示し、ユーザーエージェント、支援技術、ユーザーがライブリージョンから期待できる更新の種類について説明します。

off アクセシビリティサービスはこのビューの変更を発表しません。
polite アクセシビリティサービスはこのビューの変更を発表します。
assertive アクセシビリティサービスは、進行中の音声に割り込んで、このビューの変更をすぐに発表します。

型	デフォルト
enum(`'assertive'`, `'off'`, `'polite'`)	`'off'`

`aria-modal`
iOS

VoiceOverがレシーバの兄弟であるビュー内の要素を無視するかどうかを示すブール値。 accessibilityViewIsModalプロパティよりも優先されます。

型	デフォルト
ブール値	false

`aria-selected`

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

型
ブール値

`aria-valuemax`

スライダーやプログレスバーなどの範囲ベースのコンポーネントの最大値を表します。accessibilityValueプロパティのmax値よりも優先されます。

型
number

`aria-valuemin`

スライダーやプログレスバーなどの範囲ベースのコンポーネントの最小値を表します。accessibilityValueプロパティのmin値よりも優先されます。

型
number

`aria-valuenow`

スライダーやプログレスバーなどの範囲ベースのコンポーネントの現在の値を表します。accessibilityValueプロパティのnow値よりも優先されます。

型
number

`aria-valuetext`

コンポーネントのテキスト説明を表します。accessibilityValueプロパティのtext値よりも優先されます。

型
文字列

`collapsable`
Android

子要素のレイアウトのみに使用され、それ以外は何を描画しないビューは、最適化のためにネイティブ階層から自動的に削除される場合があります。この最適化を無効にし、このViewがネイティブビュー階層に存在することを保証するには、このプロパティをfalseに設定します。

型
bool

`focusable`
Android

このViewを非タッチ入力デバイス（例：ハードウェアキーボードによるフォーカス受信）でフォーカス可能にするかどうか。

型
ブール値

`hitSlop`

これは、タッチイベントがビューからどのくらい離れた場所から開始できるかを定義します。一般的なインターフェースガイドラインでは、少なくとも30～40ポイント/密度に依存しないピクセルのタッチターゲットをお勧めしています。

たとえば、タッチ可能なビューの高さが20の場合、hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}を使用してタッチ可能の高さを40に拡張できます。

タッチ領域は親ビューの境界を超えることはなく、タッチが2つの重複するビューにヒットした場合は、常に兄弟ビューのZインデックスが優先されます。

型
object: `{top: number, left: number, bottom: number, right: number}`

`id`

ネイティブクラスからこのビューを見つけるために使用されます。nativeIDプロパティよりも優先されます。

これにより、このビューの「レイアウトのみのビュー削除」最適化が無効になります！

型
文字列

`importantForAccessibility`
Android

アクセシビリティイベントを発生させるかどうか、および画面を照会するアクセシビリティサービスに報告するかどうかについて、ビューのアクセシビリティの重要性を制御します。Androidのみで動作します。

可能な値

'auto' - システムがビューのアクセシビリティの重要性を決定します - デフォルト（推奨）。
'yes' - ビューはアクセシビリティにとって重要です。
'no' - ビューはアクセシビリティにとって重要ではありません。
'no-hide-descendants' - ビューも、その子孫ビューもアクセシビリティにとって重要ではありません。

参照として、AndroidのimportantForAccessibilityドキュメントを参照してください。

型
enum('auto', 'yes', 'no', 'no-hide-descendants')

`nativeID`

ネイティブクラスからこのビューを見つけるために使用されます。

これにより、このビューの「レイアウトのみのビュー削除」最適化が無効になります！

型
文字列

`needsOffscreenAlphaCompositing`

このViewが100％正確な色とブレンド動作を維持するために、オフスクリーンでレンダリングされ、アルファで合成する必要があるかどうか。デフォルト（false）は、各要素を描画するために使用されるペイントに適用されたアルファを使用して、コンポーネントとその子要素を描画することにフォールバックします。オフスクリーンでコンポーネント全体をレンダリングしてアルファ値で合成する代わりに、これは、不透明度を設定しているViewに複数のオーバーラップする要素（例：複数のオーバーラップするView、またはテキストと背景）がある場合に顕著で望ましくない場合があります。

正確なアルファ動作を維持するためにオフスクリーンでレンダリングすることは非常に高価であり、ネイティブ以外の開発者にとってはデバッグが困難であるため、デフォルトでは有効になっていません。アニメーションのためにこのプロパティを有効にする必要がある場合は、ビューのコンテンツが静的な場合（つまり、各フレームで再描画する必要がない場合）、renderToHardwareTextureAndroidと組み合わせることを検討してください。このプロパティが有効になっている場合、このViewは一度オフスクリーンでレンダリングされ、ハードウェアテクスチャに保存され、その後、GPUでレンダリングターゲットを切り替えることなく、各フレームでアルファを使用して画面に合成されます。

型
bool

`nextFocusDown`
Android

Androidのドキュメントを参照してください。

型
number

`nextFocusForward`
Android

Androidのドキュメントを参照してください。

型
number

`nextFocusLeft`
Android

Androidのドキュメントを参照してください。

型
number

`nextFocusRight`
Android

Androidのドキュメントを参照してください。

型
number

`nextFocusUp`
Android

Androidのドキュメントを参照してください。

型
number

`onAccessibilityAction`

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

アクセシビリティガイドで詳細情報をご覧ください。

型
function

`onAccessibilityEscape`
iOS

accessibleがtrueの場合、ユーザーがエスケープジェスチャを実行すると、システムはこの関数を呼び出します。

型
function

`onAccessibilityTap`

accessibleがtrueの場合、ユーザーがアクセシビリティタップジェスチャを実行すると、システムはこの関数を呼び出そうとします。

型
function

`onLayout`

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

このイベントは、レイアウトが計算された直後にすぐに発生しますが、特にレイアウトアニメーションが進行中の場合は、イベントを受信した時点で新しいレイアウトが画面に反映されていない可能性があります。

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

`onMagicTap`
iOS

accessibleがtrueの場合、ユーザーがマジックタップジェスチャを実行すると、システムはこの関数を呼び出します。

型
function

`onMoveShouldSetResponder`

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

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

`onMoveShouldSetResponderCapture`

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

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

`onResponderGrant`

Viewは現在タッチイベントに応答しています。これは、ユーザーに何が起こっているかを強調表示して示す時です。

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

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

`onResponderMove`

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

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

`onResponderReject`

別のレスポンダが既にアクティブであり、レスポンダになるよう要求しているViewにそれを解放しません。

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

`onResponderRelease`

タッチの最後に発生します。

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

`onResponderTerminate`

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

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

`onResponderTerminationRequest`

他のViewがresponder（応答者）になろうとしており、このViewにresponderの解放を要求しています。trueを返すことで、解放を許可します。

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

`onStartShouldSetResponder`

このViewは、タッチ開始時にresponderになることを希望しますか？

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

`onStartShouldSetResponderCapture`

親Viewが子Viewがタッチ開始時にresponderになるのを阻止したい場合、このハンドラをtrueを返すように設定する必要があります。

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

`pointerEvents`

Viewがタッチイベントのターゲットになれるかどうかを制御します。

'auto': Viewはタッチイベントのターゲットになれます。
'none': Viewは決してタッチイベントのターゲットになりません。
'box-none': Viewは決してタッチイベントのターゲットになりませんが、そのサブビューはターゲットになることができます。CSSで以下のクラスを持つViewと同様の動作をします。

.box-none {
     pointer-events: none;
}
.box-none * {
     pointer-events: auto;
}

'box-only': Viewはタッチイベントのターゲットになることができますが、そのサブビューはターゲットになることができません。CSSで以下のクラスを持つViewと同様の動作をします。

.box-only {
     pointer-events: auto;
}
.box-only * {
     pointer-events: none;
}

型
enum('box-none', 'none', 'box-only', 'auto')

`removeClippedSubviews`

これはRCTViewによって公開されている予約済みのパフォーマンスプロパティであり、多くのサブビュー（そのほとんどが画面外にある）を含むスクロールコンテンツに役立ちます。このプロパティを効果的にするには、境界外に広がる多くのサブビューを含むビューに適用する必要があります。サブビューにも、コンテナービュー（またはそのスーパービューのいずれか）にもoverflow: hiddenを設定する必要があります。

型
bool

`renderToHardwareTextureAndroid`
Android

このViewとそのすべての子をGPU上の単一のハードウェアテクスチャにレンダリングするかどうか。

Androidでは、不透明度、回転、平行移動、および/またはスケールのみを変更するアニメーションやインタラクションに役立ちます。これらの場合、ビューを再描画する必要がなく、ディスプレイリストを再実行する必要もありません。テクスチャを再利用し、異なるパラメーターで再合成できます。欠点は、限られたビデオメモリを使用する可能性があるため、インタラクション/アニメーションの終了時にこのプロパティをfalseに戻す必要があります。

型
bool

`role`

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

型
ロール

`shouldRasterizeIOS`
iOS

このViewを合成前にビットマップとしてレンダリングするかどうか。

iOSでは、このコンポーネントの寸法や子を変更しないアニメーションやインタラクションに役立ちます。たとえば、静的ビューの位置を平行移動する場合、ラスタライズにより、レンダラーは静的ビューのキャッシュされたビットマップを再利用し、各フレームで迅速に合成できます。

ラスタライズはオフスクリーン描画パスを発生させ、ビットマップはメモリを消費します。このプロパティを使用する場合は、テストと測定を行ってください。

型
bool

`style`

型
Viewスタイル

`tabIndex`
Android

このViewを非タッチ入力デバイス（例：ハードウェアキーボードでフォーカスを受け取る）でフォーカス可能にするかどうか。以下の値をサポートします。

0 - Viewはフォーカス可能です
-1 - Viewはフォーカスできません

型
enum(0, -1)

`testID`

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

これにより、このビューの「レイアウトのみのビュー削除」最適化が無効になります！

型
文字列

合成タッチイベント
プロパティ

合成タッチイベント​

参照

プロパティ​

accessibilityActions​

accessibilityElementsHidden iOS​

accessibilityHint​

accessibilityLanguage iOS​

accessibilityIgnoresInvertColors iOS​

accessibilityLabel​

accessibilityLiveRegion Android​

accessibilityRole​

accessibilityState​

accessibilityValue​

accessibilityViewIsModal iOS​

accessible​

aria-busy​

aria-checked​

aria-disabled​

aria-expanded​

aria-hidden​

aria-label​

aria-labelledby Android​

aria-live Android​

aria-modal iOS​

aria-selected​

aria-valuemax​

aria-valuemin​

aria-valuenow​

aria-valuetext​

collapsable Android​

focusable Android​

hitSlop​

id​

importantForAccessibility Android​

nativeID​

needsOffscreenAlphaCompositing​

nextFocusDown Android​

nextFocusForward Android​

nextFocusLeft Android​

nextFocusRight Android​

nextFocusUp Android​

onAccessibilityAction​

onAccessibilityEscape iOS​

onAccessibilityTap​

onLayout​

onMagicTap iOS​

onMoveShouldSetResponder​

onMoveShouldSetResponderCapture​

onResponderGrant​

onResponderMove​

onResponderReject​

onResponderRelease​

onResponderTerminate​

onResponderTerminationRequest​

onStartShouldSetResponder​

onStartShouldSetResponderCapture​

pointerEvents​

removeClippedSubviews​

renderToHardwareTextureAndroid Android​

role​

shouldRasterizeIOS iOS​

style​

tabIndex Android​

testID​

合成タッチイベント

プロパティ

`accessibilityActions`

`accessibilityElementsHidden`
iOS

`accessibilityHint`

`accessibilityLanguage`
iOS

`accessibilityIgnoresInvertColors`
iOS

`accessibilityLabel`

`accessibilityLiveRegion`
Android

`accessibilityRole`

`accessibilityState`

`accessibilityValue`

`accessibilityViewIsModal`
iOS

`accessible`

`aria-busy`

`aria-checked`

`aria-disabled`

`aria-expanded`

`aria-hidden`

`aria-label`

`aria-labelledby`
Android

`aria-live`
Android

`aria-modal`
iOS

`aria-selected`

`aria-valuemax`

`aria-valuemin`

`aria-valuenow`

`aria-valuetext`

`collapsable`
Android

`focusable`
Android

`hitSlop`

`id`

`importantForAccessibility`
Android

`nativeID`

`needsOffscreenAlphaCompositing`

`nextFocusDown`
Android

`nextFocusForward`
Android

`nextFocusLeft`
Android

`nextFocusRight`
Android

`nextFocusUp`
Android

`onAccessibilityAction`

`onAccessibilityEscape`
iOS

`onAccessibilityTap`

`onLayout`

`onMagicTap`
iOS

`onMoveShouldSetResponder`

`onMoveShouldSetResponderCapture`

`onResponderGrant`

`onResponderMove`

`onResponderReject`

`onResponderRelease`

`onResponderTerminate`

`onResponderTerminationRequest`

`onStartShouldSetResponder`

`onStartShouldSetResponderCapture`

`pointerEvents`

`removeClippedSubviews`

`renderToHardwareTextureAndroid`
Android

`role`

`shouldRasterizeIOS`
iOS

`style`

`tabIndex`
Android

`testID`