メインコンテンツへスキップ

View

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

Viewは他のビュー内にネストされるように設計されており、あらゆるタイプの0個から多数の子を持つことができます。

この例では、色付きの2つのボックスとテキストコンポーネントをパディング付きで横一列に並べるViewを作成しています。

注

インラインスタイルもサポートされていますが、Viewは明確さとパフォーマンスのためにStyleSheetと一緒に使用するように設計されています。

合成タッチイベント​

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' - 要素を画像として扱うべき場合に使用します。例えば、ボタンやリンクと組み合わせることができます。
  • '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​

要素が変更中であり、支援技術がユーザーに更新を通知する前に変更が完了するのを待つ可能性があることを示します。

型デフォルト
booleanfalse

aria-checked​

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

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

aria-disabled​

要素が知覚可能であるが無効であり、編集またはその他の操作ができないことを示します。

型デフォルト
booleanfalse

aria-expanded​

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

型デフォルト
booleanfalse

aria-hidden​

要素が支援技術から隠されているかどうかを示します。

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

型デフォルト
booleanfalse

aria-label​

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

型
string

aria-labelledby
Android
​

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

tsx
<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プロップよりも優先されます。

型デフォルト
booleanfalse

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に設定します。

型デフォルト
booleantrue

collapsableChildren​

これをfalseに設定すると、ビューの直接の子がネイティブビュー階層から削除されるのを防ぎます。これは、各子にcollapsable={false}を設定するのと同じ効果です。

型デフォルト
booleantrue

experimental_accessibilityOrder​

実験的 🧪

このAPIは実験的です。実験的なAPIにはバグが含まれている可能性があり、将来のバージョンのReact Nativeで変更される可能性があります。本番環境では使用しないでください。

experimental_accessibilityOrderは、支援技術がこのViewの子孫にフォーカスする順序を示します。このプロップは文字列の配列を受け取り、各文字列は順序が定義されている子孫コンポーネントのnativeIDです。このプロップ自体はアクセシビリティを有効にしません。参照される各コンポーネントは、accessibleをtrueに設定することで、依然としてアクセス可能である必要があります。このプロップはネスト可能であり、網羅的です。

  • experimental_accessibilityOrderがアクセス不可能なコンポーネントへの参照を含む場合、そのコンポーネントの子孫にデフォルトの順序でフォーカスします。さらに、他のexperimental_accessibilityOrderを持つコンポーネントへの参照も含むことができます。
  • そうでなければアクセス可能であるコンポーネントが、experimental_accessibilityOrderで直接参照されていない場合、またはexperimental_accessibilityOrderで直接参照されているコンテナ内にネストされていない場合、アクセス可能になりません。

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

型
文字列の配列

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​

このビューはタッチ応答性を「主張」したいですか？これは、ビューがレスポンダーではないときに、ビュー上のすべてのタッチ移動で呼び出されます。

型
({nativeEvent: PressEvent}) => boolean

onMoveShouldSetResponderCapture​

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

型
({nativeEvent: PressEvent}) => boolean

onResponderGrant​

ビューがタッチイベントに応答するようになりました。これは、ユーザーに何が起こっているかを強調表示して示すべきときです。

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で以下のクラスを持っていた場合と同様に動作します。
css
.box-none {
  pointer-events: none;
}
.box-none * {
  pointer-events: auto;
}
  • 'box-only': ビューはタッチイベントのターゲットになれますが、そのサブビューはターゲットになれません。ビューがCSSで以下のクラスを持っていた場合と同様に動作します。
css
.box-only {
  pointer-events: auto;
}
.box-only * {
  pointer-events: none;
}
型
enum('box-none', 'none', 'box-only', 'auto')

ref​

マウント時に要素ノードが割り当てられる ref セッター。

removeClippedSubviews​

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

型
bool

renderToHardwareTextureAndroid
Android
​

このViewが、それ自体（およびそのすべての子）をGPU上の単一のハードウェアテクスチャにレンダリングすべきかどうか。

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

型
bool

role​

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

型
役割

shouldRasterizeIOS
iOS
​

このViewが合成前にビットマップとしてレンダリングされるべきかどうか。

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

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

型
bool

style​

型
View Style

tabIndex
Android
​

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

  • 0 - ビューはフォーカス可能
  • -1 - ビューはフォーカス不可
型
enum(0, -1)

testID​

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

警告

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

型
string