Modal
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
El componente Modal es una forma básica de presentar contenido sobre una vista envolvente.
Ejemplo
Referencia
Propiedades
Props de View
Hereda Props de View.
animated
Obsoleto. Utiliza la propiedad
animationTypeen su lugar.
animationType
La propiedad animationType controla cómo se anima el modal.
Valores posibles:
-
slide: aparece deslizándose desde abajo -
fade: aparece con efecto de fundido -
none: aparece sin animación
| Type | Default |
|---|---|
enum('none', 'slide', 'fade') | none |
backdropColor
El color de fondo (backdropColor) del modal (o color de fondo del contenedor). Por defecto es white si no se especifica y transparent es false. Se ignora si transparent es true.
| Type | Default |
|---|---|
| color | white |
hardwareAccelerated Android
La propiedad hardwareAccelerated controla si se fuerza la aceleración por hardware para la ventana subyacente.
| Type | Default |
|---|---|
| bool | false |
navigationBarTranslucent Android
La propiedad navigationBarTranslucent determina si el modal debe extenderse bajo la barra de navegación del sistema. Sin embargo, statusBarTranslucent también debe establecerse en true para hacer la barra de navegación translúcida.
| Type | Default |
|---|---|
| bool | false |
onDismiss iOS
La propiedad onDismiss permite pasar una función que se llamará cuando se haya descartado el modal.
| Type |
|---|
| function |
onOrientationChange iOS
El callback onOrientationChange se llama cuando cambia la orientación mientras se muestra el modal. La orientación proporcionada es solo 'portrait' (vertical) o 'landscape' (horizontal). Este callback también se llama en el renderizado inicial, independientemente de la orientación actual.
| Type |
|---|
| function |
onRequestClose
El callback onRequestClose se llama cuando el usuario pulsa el botón de retroceso del hardware en Android o el botón de menú en Apple TV. Debido a que esta propiedad es obligatoria, ten en cuenta que los eventos de BackHandler no se emitirán mientras el modal esté abierto.
En iOS, este callback se llama cuando un Modal se está descartando mediante un gesto de arrastre cuando presentationStyle es pageSheet or formSheet.
| Type |
|---|
| function Required Android TV function iOS |
onShow
La propiedad onShow permite pasar una función que se llamará cuando el modal se haya mostrado.
| Type |
|---|
| function |
presentationStyle iOS
La propiedad presentationStyle controla cómo aparece el modal (generalmente en dispositivos más grandes como iPad o iPhones plus). Consulte https://developer.apple.com/reference/uikit/uimodalpresentationstyle para más detalles.
Valores posibles:
-
fullScreen: cubre completamente la pantalla -
pageSheet: cubre el ancho vertical centrado (solo en dispositivos grandes) -
formSheet: cubre un ancho estrecho centrado (solo en dispositivos grandes) -
overFullScreen: cubre completamente la pantalla pero permite transparencia
| Type | Default |
|---|---|
enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen') | fullScreen if transparent={false}overFullScreen if transparent={true} |
statusBarTranslucent Android
La propiedad statusBarTranslucent determina si el modal debe extenderse bajo la barra de estado del sistema.
| Type | Default |
|---|---|
| bool | false |
supportedOrientations iOS
La propiedad supportedOrientations permite rotar el modal a cualquiera de las orientaciones especificadas. En iOS, el modal sigue restringido por lo especificado en el campo UISupportedInterfaceOrientations del Info.plist de tu aplicación.
Al usar
presentationStylecomopageSheetoformSheet, esta propiedad será ignorada por iOS.
| Type | Default |
|---|---|
array of enums('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right') | ['portrait'] |
transparent
La propiedad transparent determina si el modal llenará toda la vista. Establecer esto en true renderizará el modal sobre un fondo transparente.
| Type | Default |
|---|---|
| bool | false |
visible
La propiedad visible determina si tu modal es visible.
| Type | Default |
|---|---|
| bool | true |