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

Modal

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

例​

リファレンス

Props​

View Props​

View Propsを継承します。

animated​

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

animationType​

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

使用可能な値

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

backdropColor​

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

タイプデフォルト
色白

hardwareAccelerated
Android
​

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

タイプデフォルト
真偽値false

onDismiss
iOS
​

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

タイプ
関数

onOrientationChange
iOS
​

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

タイプ
関数

onRequestClose​

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

タイプ
関数
必須
Android
TV
関数
iOS

onShow​

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

タイプ
関数

presentationStyle
iOS
​

presentationStyle propは、モーダルの表示方法を制御します（一般的にiPadやプラスサイズの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は、モーダルがシステムステータスバーの下に配置されるかどうかを決定します。

タイプデフォルト
真偽値false

supportedOrientations
iOS
​

supportedOrientations propを使用すると、モーダルを指定された方向のいずれかに回転させることができます。iOSでは、モーダルはアプリのInfo.plistのUISupportedInterfaceOrientationsフィールドで指定されている内容によって制限されます。

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

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

transparent​

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

タイプデフォルト
真偽値false

visible​

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

タイプデフォルト
真偽値true