Modal

Traducción Beta No Oficial

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

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

Referencia

Props

Props de View

Hereda Props de View.

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

animated

Obsoleto. Utiliza la propiedad animationType en su lugar.

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

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

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

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

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

hardwareAccelerated

Android

La propiedad hardwareAccelerated controla si se fuerza la aceleración por hardware para la ventana subyacente.

Type	Default
bool	false

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

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

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

onDismiss

iOS

La propiedad onDismiss permite pasar una función que se llamará cuando se haya descartado el modal.

Type
function

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

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

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

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

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

onShow

La propiedad onShow permite pasar una función que se llamará cuando el modal se haya mostrado.

Type
function

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

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}

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

statusBarTranslucent

Android

La propiedad statusBarTranslucent determina si el modal debe extenderse bajo la barra de estado del sistema.

Type	Default
bool	false

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

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 presentationStyle como pageSheet o formSheet, esta propiedad será ignorada por iOS.

Type	Default
array of enums('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')	['portrait']

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

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

---

id: intro-react-native-components title: Componentes principales y componentes nativos description: 'React Native te permite componer interfaces de aplicaciones usando Componentes Nativos. Por suerte, incluye un conjunto de estos componentes para que puedas comenzar ahora mismo: ¡los Componentes Principales!'

visible

La propiedad visible determina si tu modal es visible.

Type	Default
bool	true