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

Modal

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

使用例​

リファレンス

Props​

ViewのProps​

ViewのPropsを継承します。

animated​

非推奨。 代わりに animationType prop を使用してください。

animationType​

animationType prop は、モーダルのアニメーション方法を制御します。

可能な値

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

backdropColor​

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

型デフォルト
色白

hardwareAccelerated
Android
​

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

型デフォルト
boolfalse

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

型デフォルト
boolfalse

onDismiss
iOS
​

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

型
関数

onOrientationChange
iOS
​

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

型
関数

allowSwipeDismissal
iOS
​

iOS でモーダルを下にスワイプして閉じることができるかどうかを制御します。これを有効にするには、閉じ処理を処理するために onRequestClose prop を実装する必要があります。

型デフォルト
boolfalse

onRequestClose​

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

型
関数
必須
Android
TV
関数
iOS

onShow​

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

型
関数

presentationStyle
iOS
​

presentationStyle prop は、モーダルの表示方法を制御します (一般に、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 prop は、モーダルがシステムステータスバーの下に表示されるべきかどうかを決定します。

型デフォルト
boolfalse

supportedOrientations
iOS
​

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

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

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

transparent​

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

型デフォルト
boolfalse

visible​

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

型デフォルト
booltrue