View
UIを構築するための最も基本的なコンポーネントである View は、flexbox によるレイアウト、style、いくつかのタッチハンドリング、アクセシビリティコントロールをサポートするコンテナです。View は、React Nativeが実行されているプラットフォーム上のネイティブビュー（それが UIView、<div>、android.view などであれ）に直接マッピングされます。
View は他のビューの内部にネストされるように設計されており、0個から多数の任意の子要素を持つことができます。
この例では、色付きの2つのボックスとテキストコンポーネントを、パディング付きで行に並べてラップする View を作成します。
Viewは、インラインスタイルもサポートされていますが、明瞭さとパフォーマンスのためにStyleSheetと一緒に使用するように設計されています。
合成タッチイベント (Synthetic Touch Events)
View のレスポンダープロップ（例： onResponderMove）に対して渡される合成タッチイベントは、PressEvent の形式です。
リファレンス
Props
accessibilityActions
アクセシビリティアクションを使用すると、支援技術がコンポーネントのアクションをプログラムで呼び出すことができます。accessibilityActionsプロパティには、アクションオブジェクトのリストを含める必要があります。各アクションオブジェクトには、フィールド名とラベルを含める必要があります。
詳細はアクセシビリティガイドを参照してください。
| 型 |
|---|
| array |
accessibilityElementsHidden iOS
このアクセシビリティ要素内に含まれるアクセシビリティ要素が非表示であるかどうかを示す値です。デフォルトは false です。
詳細については、アクセシビリティガイドを参照してください。
| 型 |
|---|
| bool |
accessibilityHint
アクセシビリティヒントは、アクセシビリティラベルから結果が明確でない場合に、ユーザーがアクセシビリティ要素に対してアクションを実行したときに何が起こるかを理解するのに役立ちます。
| 型 |
|---|
| string |
accessibilityLanguage iOS
ユーザーが要素を操作する際にスクリーンリーダーが使用すべき言語を示す値です。BCP 47仕様に従う必要があります。
詳細はiOSの `accessibilityLanguage` ドキュメントを参照してください。
| 型 |
|---|
| string |
accessibilityIgnoresInvertColors iOS
色の反転がオンになったときに、このビューを反転すべきかどうかを示す値です。値が true の場合、色の反転がオンであってもビューは反転されません。
詳細については、アクセシビリティガイドを参照してください。
| 型 |
|---|
| bool |
accessibilityLabel
ユーザーが要素を操作したときにスクリーンリーダーによって読み上げられるテキストを上書きします。デフォルトでは、ラベルはすべての子を走査し、すべてのTextノードをスペースで区切って蓄積することによって構築されます。
| 型 |
|---|
| string |
accessibilityLiveRegion Android
このビューが変更されたときにユーザーに通知すべきかどうかをアクセシビリティサービスに示します。Android API 19以上でのみ動作します。指定可能な値：
'none'- アクセシビリティサービスはこのビューの変更をアナウンスすべきではありません。'polite'- アクセシビリティサービスはこのビューの変更をアナウンスすべきです。'assertive'- アクセシビリティサービスは進行中の音声を中断して、このビューの変更を直ちにアナウンスすべきです。
参考として、Androidの View ドキュメントを参照してください。
| 型 |
|---|
| enum('none', 'polite', 'assertive') |
accessibilityRole
accessibilityRole は、コンポーネントの目的を支援技術のユーザーに伝えます。
accessibilityRole は以下のいずれかになります：
'none'- 要素に役割がない場合に使用されます。'button'- 要素がボタンとして扱われるべき場合に使用されます。'link'- 要素がリンクとして扱われるべき場合に使用されます。'search'- テキストフィールド要素が検索フィールドとしても扱われるべき場合に使用されます。'image'- 要素が画像として扱われるべき場合に使用されます。例えば、buttonやlinkと組み合わせることができます。'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にグリッド内外のアナウンスを追加します。
| 型 |
|---|
| string |
accessibilityState
コンポーネントの現在の状態を支援技術のユーザーに説明します。
詳細については、アクセシビリティガイドを参照してください。
| 型 |
|---|
object: {disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool} |
accessibilityValue
コンポーネントの現在の値を表します。これはコンポーネントの値のテキスト説明である場合もあれば、スライダーやプログレスバーのような範囲ベースのコンポーネントの場合は範囲情報（最小値、現在値、最大値）を含みます。
詳細については、アクセシビリティガイドを参照してください。
| 型 |
|---|
object: {min: number, max: number, now: number, text: string} |
accessibilityViewIsModal iOS
VoiceOverがレシーバーの兄弟であるビュー内の要素を無視すべきかどうかを示す値です。デフォルトは false です。
詳細については、アクセシビリティガイドを参照してください。
| 型 |
|---|
| bool |
accessible
true の場合、ビューがアクセシビリティ要素であり、スクリーンリーダーやハードウェアキーボードなどの支援技術によって発見可能であることを示します。デフォルトでは、すべてのタッチ可能な要素はアクセス可能です。
詳細については、アクセシビリティガイドを参照してください。
aria-busy
要素が変更中であり、支援技術がユーザーに更新を通知する前に変更が完了するのを待つ可能性があることを示します。
| 型 | デフォルト |
|---|---|
| boolean | false |
aria-checked
チェック可能な要素の状態を示します。このフィールドは、混合チェックボックスを表すためにブール値または「mixed」文字列のいずれかを取ることができます。
| 型 | デフォルト |
|---|---|
| boolean, 'mixed' | false |
aria-disabled
要素が知覚可能であるが無効であり、編集またはその他の操作ができないことを示します。
| 型 | デフォルト |
|---|---|
| boolean | false |
aria-expanded
展開可能な要素が現在展開されているか折りたたまれているかを示します。
| 型 | デフォルト |
|---|---|
| boolean | false |
aria-hidden
このアクセシビリティ要素内に含まれるアクセシビリティ要素が非表示であるかどうかを示します。
例えば、兄弟ビュー A と B を含むウィンドウで、ビュー B の aria-hidden を true に設定すると、VoiceOverはビュー B 内の要素を無視します。
| 型 | デフォルト |
|---|---|
| boolean | false |
aria-label
インタラクティブな要素にラベルを付ける文字列値を定義します。
| 型 |
|---|
| string |
aria-labelledby Android
適用される要素をラベル付けする要素を識別します。aria-labelledby の値は、関連する要素の nativeID と一致する必要があります。
<View>
<Text nativeID="formLabel">Label for Input Field</Text>
<TextInput aria-label="input" aria-labelledby="formLabel" />
</View>
| 型 |
|---|
| string |
aria-live Android
要素が更新されることを示し、ユーザーエージェント、支援技術、およびユーザーがライブリージョンから期待できる更新の種類を記述します。
- off アクセシビリティサービスはこのビューの変更をアナウンスすべきではありません。
- polite アクセシビリティサービスはこのビューの変更をアナウンスすべきです。
- assertive アクセシビリティサービスは進行中の音声を中断して、このビューの変更を直ちにアナウンスすべきです。
| 型 | デフォルト |
|---|---|
enum('assertive', 'off', 'polite') | 'off' |
aria-modal iOS
VoiceOverがレシーバーの兄弟であるビュー内の要素を無視すべきかどうかを示すブール値です。accessibilityViewIsModalプロパティよりも優先されます。
| 型 | デフォルト |
|---|---|
| boolean | false |
aria-selected
選択可能な要素が現在選択されているかどうかを示します。
| 型 |
|---|
| boolean |
aria-valuemax
スライダーやプログレスバーなどの範囲ベースのコンポーネントの最大値を表します。accessibilityValueプロパティの max 値よりも優先されます。
| 型 |
|---|
| number |
aria-valuemin
スライダーやプログレスバーなどの範囲ベースのコンポーネントの最小値を表します。accessibilityValueプロパティの min 値よりも優先されます。
| 型 |
|---|
| number |
aria-valuenow
スライダーやプログレスバーなどの範囲ベースのコンポーネントの現在値を表します。accessibilityValueプロパティの now 値よりも優先されます。
| 型 |
|---|
| number |
aria-valuetext
コンポーネントのテキスト説明を表します。accessibilityValueプロパティの text 値よりも優先されます。
| 型 |
|---|
| string |
collapsable
子のレイアウトのみに使用されるか、何も描画しないビューは、最適化としてネイティブ階層から自動的に削除されることがあります。この最適化を無効にし、この View がネイティブビュー階層に存在することを保証するには、このプロパティを false に設定します。
| 型 | デフォルト |
|---|---|
| boolean | true |
collapsableChildren
false に設定すると、各子に collapsable={false} を設定するのと同様の効果で、ビューの直接の子がネイティブビュー階層から削除されるのを防ぎます。
| 型 | デフォルト |
|---|---|
| boolean | true |
focusable Android
この View がタッチ以外の入力デバイス（例：ハードウェアキーボード）でフォーカス可能であるべきかどうか。
| 型 |
|---|
| boolean |
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プロパティよりも優先されます。
これにより、このビューに対する「レイアウト専用ビューの削除」最適化が無効になります！
| 型 |
|---|
| string |
importantForAccessibility Android
ビューがアクセシビリティイベントを発火するかどうか、画面をクエリするアクセシビリティサービスに報告されるかどうかという、アクセシビリティにとってビューがどれほど重要かを制御します。Android専用です。
可能な値
'auto'- システムがビューがアクセシビリティにとって重要かどうかを決定します - デフォルト（推奨）。'yes'- ビューはアクセシビリティにとって重要です。'no'- ビューはアクセシビリティにとって重要ではありません。'no-hide-descendants'- ビューもその子孫ビューも、アクセシビリティにとって重要ではありません。
参考として、Androidの importantForAccessibility ドキュメントを参照してください。
| 型 |
|---|
| enum('auto', 'yes', 'no', 'no-hide-descendants') |
nativeID
ネイティブクラスからこのビューを特定するために使用されます。
これにより、このビューに対する「レイアウト専用ビューの削除」最適化が無効になります！
| 型 |
|---|
| string |
needsOffscreenAlphaCompositing
この View が、100%正確な色とブレンド動作を維持するために、オフスクリーンでレンダリングされ、アルファ値と合成される必要があるかどうか。デフォルト(false)では、コンポーネント全体をオフスクリーンでレンダリングしてアルファ値で合成する代わりに、各要素を描画するために使用されるペイントにアルファ値を適用してコンポーネントとその子を描画します。このデフォルトの動作は、不透明度を設定している View に複数の重なり合う要素がある場合（例：複数の重なり合う View、またはテキストと背景）に、目立って望ましくない結果になることがあります。
正確なアルファ動作を維持するためのオフスクリーンレンダリングは非常に高コストで、ネイティブ開発者以外にはデバッグが困難です。そのため、デフォルトではオンになっていません。アニメーションのためにこのプロパティを有効にする必要がある場合は、ビューのコンテンツが静的（つまり、各フレームで再描画する必要がない）であれば、renderToHardwareTextureAndroid と組み合わせることを検討してください。そのプロパティが有効になっている場合、このビューは一度オフスクリーンでレンダリングされ、ハードウェアテクスチャに保存された後、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 iOS
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 がレスポンダーになりたがっており、この View にレスポンダーを解放するよう求めています。true を返すと解放が許可されます。
| 型 |
|---|
({nativeEvent: PressEvent}) => void |
onStartShouldSetResponder
このビューはタッチの開始時にレスポンダーになりたいですか？
| 型 |
|---|
({nativeEvent: PressEvent}) => boolean |
onStartShouldSetResponderCapture
親 View が子の View がタッチ開始時にレスポンダーになるのを防ぎたい場合、true を返すこのハンドラを持つべきです。
| 型 |
|---|
({nativeEvent: PressEvent}) => boolean |
pointerEvents
View がタッチイベントのターゲットになれるかどうかを制御します。
'auto': Viewはタッチイベントのターゲットになれます。'none': Viewは決してタッチイベントのターゲットになりません。'box-none': Viewは決してタッチイベントのターゲットになりませんが、そのサブビューはなれます。これは、ビューがCSSで以下のクラスを持っているかのように動作します。
.box-none {
pointer-events: none;
}
.box-none * {
pointer-events: auto;
}
'box-only': ビューはタッチイベントのターゲットになれますが、そのサブビューはなれません。これは、ビューがCSSで以下のクラスを持っているかのように動作します。
.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 プロパティよりも優先されます。
| 型 |
|---|
| Role |
shouldRasterizeIOS iOS
この View が合成前にビットマップとしてレンダリングされるべきかどうか。
iOSでは、このコンポーネントの寸法やその子を変更しないアニメーションやインタラクションに役立ちます。たとえば、静的なビューの位置を移動する場合、ラスタライズによりレンダラーは静的なビューのキャッシュされたビットマップを再利用し、各フレーム中に迅速に合成できます。
ラスタライズはオフスクリーン描画パスを発生させ、ビットマップはメモリを消費します。このプロパティを使用する際は、テストと測定を行ってください。
| 型 |
|---|
| bool |
style
| 型 |
|---|
| View Style |
tabIndex Android
この View がタッチ以外の入力デバイス（例：ハードウェアキーボード）でフォーカス可能であるべきかどうか。以下の値をサポートします：
0- Viewはフォーカス可能です-1- Viewはフォーカス不可能です
| 型 |
|---|
| enum(0, -1) |
testID
E2Eテストでこのビューを特定するために使用されます。
これにより、このビューに対する「レイアウト専用ビューの削除」最適化が無効になります！
| 型 |
|---|
| string |