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

Modal

Modalコンポーネントは、囲んでいるビューの上にコンテンツを表示する基本的な方法です。

例​

リファレンス

Props​

View Props​

ViewのPropsを継承します。

animated​

非推奨

animationTypeプロパティを使用してください。

animationType​

animationTypeプロパティは、モーダルのアニメーションを制御します。

可能な値

  • slideは下からスライドインします。
  • fadeはフェードインします。
  • noneはアニメーションなしで表示されます。
型デフォルト
enum('none', 'slide', 'fade')none

backdropColor​

モーダルのbackdropColor（またはモーダルのコンテナの背景色）。指定しない場合、transparentがfalseの場合はwhiteがデフォルトです。transparentがtrueの場合は無視されます。

型デフォルト
colorwhite

hardwareAccelerated
Android
​

hardwareAcceleratedプロパティは、基になるウィンドウのハードウェアアクセラレーションを強制するかどうかを制御します。

型デフォルト
boolfalse

navigationBarTranslucentプロパティは、モーダルがシステムナビゲーションバーの下に表示されるかどうかを決定します。ただし、ナビゲーションバーを半透明にするには、statusBarTranslucentもtrueに設定する必要があります。

型デフォルト
boolfalse

onDismiss
iOS
​

onDismissプロパティは、モーダルが閉じられたときに呼び出される関数を渡すことができます。

型
function

onOrientationChange
iOS
​

onOrientationChangeコールバックは、モーダルが表示されている間に向きが変更されたときに呼び出されます。提供される向きは「portrait」または「landscape」のみです。このコールバックは、現在の向きに関係なく、最初のレンダリング時にも呼び出されます。

型
function

allowSwipeDismissal
iOS
​

iOSでモーダルをスワイプダウンで閉じることを許可するかどうかを制御します。これを機能させるには、閉じる処理を処理するためにonRequestCloseプロパティを実装する必要があります。

型デフォルト
boolfalse

ref​

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

onRequestClose​

onRequestCloseコールバックは、Androidでユーザーがハードウェアの戻るボタンをタップしたとき、またはApple TVでメニューボタンをタップしたときに呼び出されます。この必須プロパティのため、モーダルが開いている間はBackHandlerイベントが発行されないことに注意してください。iOSでは、presentationStyleがpageSheetまたはformSheetの場合に、ドラッグジェスチャを使用してモーダルが閉じられているときにこのコールバックが呼び出されます。allowSwipeDismissalが有効になっている場合、モーダルを閉じた後にこのコールバックが呼び出されます。

型
function
必須
Android
TV
function
iOS

onShow​

onShowプロパティは、モーダルが表示されたときに呼び出される関数を渡すことができます。

型
function

presentationStyle
iOS
​

presentationStyleプロパティは、モーダルがどのように表示されるかを制御します（通常、iPadやPlusサイズのiPhoneなどの大型デバイスで）。詳細については、https://developer.apple.com/reference/uikit/uimodalpresentationstyleを参照してください。

可能な値

  • fullScreenは画面全体を覆います
  • pageSheetはポートレート幅のビューを中央に配置して覆います（大型デバイスのみ）
  • formSheetは狭い幅のビューを中央に配置して覆います（大型デバイスのみ）
  • overFullScreenは画面全体を覆いますが、透明度を許可します
型デフォルト
enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')transparent={false}の場合fullScreen
transparent={true}の場合overFullScreen

statusBarTranslucent
Android
​

statusBarTranslucentプロパティは、モーダルがシステムステータスバーの下に表示されるかどうかを決定します。

型デフォルト
boolfalse

supportedOrientations
iOS
​

supportedOrientationsプロパティは、モーダルを指定されたいずれかの向きに回転させることを許可します。iOSでは、モーダルはアプリのInfo.plistのUISupportedInterfaceOrientationsフィールドで指定されているものによって依然として制限されます。

注

iOSでpageSheetまたはformSheetのpresentationStyleを使用する場合、このプロパティは無視されます。

型デフォルト
enumの配列('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')['portrait']

transparent​

transparentプロパティは、モーダルがビュー全体を占めるかどうかを決定します。これをtrueに設定すると、モーダルが透明な背景の上にレンダリングされます。

型デフォルト
boolfalse

visible​

visibleプロパティは、モーダルが表示されているかどうかを決定します。

型デフォルト
booltrue