跳到主要內容

Modal

Modal 組件是一種在封閉視圖上方呈現內容的基本方式。

範例​

參考

Props​

View Props​

繼承 View Props。

animated​

已棄用。 請改用 animationType 屬性。

animationType​

animationType 屬性控制 modal 的動畫效果。

可能的值

  • slide 從底部滑入
  • fade 淡入檢視
  • none 無動畫顯示
類型預設
enum('none', 'slide', 'fade')none

backdropColor​

modal 的 backdropColor (或 modal 容器的背景顏色)。如果未提供且 transparent 為 false，則預設為 white。如果 transparent 為 true，則忽略此屬性。

類型預設
colorwhite

hardwareAccelerated
Android
​

hardwareAccelerated 屬性控制是否強制底層視窗使用硬體加速。

類型預設
boolfalse

navigationBarTranslucent 屬性決定您的 modal 是否應延伸至系統導覽列下方。然而，statusBarTranslucent 也需要設定為 true 才能使導覽列變為半透明。

類型預設
boolfalse

onDismiss
iOS
​

onDismiss 屬性允許傳遞一個函數，該函數將在 modal 被關閉後調用。

類型
function

onOrientationChange
iOS
​

當 modal 顯示時方向發生變化，則會調用 onOrientationChange 回調函數。提供的方向僅為 'portrait' 或 'landscape'。此回調函數也會在初始渲染時調用，無論目前方向為何。

類型
function

onRequestClose​

當使用者點擊 Android 上的硬體返回按鈕或 Apple TV 上的選單按鈕時，將調用 onRequestClose 回調函數。由於此屬性為必填，請注意，只要 modal 開啟，就不會發出 BackHandler 事件。在 iOS 上，當使用拖曳手勢關閉 Modal 且 presentationStyle 為 pageSheet 或 formSheet 時，會調用此回調函數

類型
function
必填
Android
TV
function
iOS

onShow​

onShow 屬性允許傳遞一個函數，該函數將在 modal 顯示後調用。

類型
function

presentationStyle
iOS
​

presentationStyle 屬性控制 modal 的顯示方式 (通常在較大的裝置上，例如 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 屬性決定您的 modal 是否應延伸至系統狀態列下方。

類型預設
boolfalse

supportedOrientations
iOS
​

supportedOrientations 屬性允許 modal 旋轉至任何指定的方向。在 iOS 上，modal 仍然受限於您的應用程式 Info.plist 檔案中 UISupportedInterfaceOrientations 欄位指定的內容。

當使用 pageSheet 或 formSheet 的 presentationStyle 時，iOS 將忽略此屬性。

類型預設
array of enums('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')['portrait']

transparent​

transparent 屬性決定您的 modal 是否將填滿整個視圖。將其設定為 true 將在透明背景上渲染 modal。

類型預設
boolfalse

visible​

visible 屬性決定您的 modal 是否可見。

類型預設
booltrue