Vista

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 fundamental para construir interfaces de usuario, View es un contenedor que admite diseño con flexbox, estilos, manejo táctil básico y controles de accesibilidad. View se corresponde directamente con el equivalente nativo en cualquier plataforma donde se ejecute React Native, ya sea UIView, <div>, android.view, etc.

View está diseñado para anidarse dentro de otras vistas y puede tener de 0 a muchos hijos de cualquier tipo.

Este ejemplo crea un View que envuelve dos cajas con color y un componente de texto en una fila con relleno.

Los View están diseñados para usarse con StyleSheet para claridad y rendimiento, aunque también se admiten estilos en línea.

Eventos Táctiles Sintéticos

Para las props de respuesta táctil de View (ej. onResponderMove), el evento táctil sintético que se les pasa tiene la forma de PressEvent.

---

Referencia

Props

---

accessibilityActions

Las acciones de accesibilidad permiten que una tecnología asistencial invoque programáticamente las acciones de un componente. La propiedad accessibilityActions debe contener una lista de objetos de acción. Cada objeto debe incluir los campos name y label.

Consulta la guía de Accesibilidad para más información.

Type
array

---

accessibilityElementsHidden

iOS

Valor que indica si los elementos de accesibilidad contenidos dentro de este elemento de accesibilidad están ocultos. El valor predeterminado es false.

Consulta la guía de Accesibilidad para más información.

Type
bool

---

accessibilityHint

Una sugerencia de accesibilidad ayuda a los usuarios a entender qué sucederá al interactuar con el elemento cuando la etiqueta no lo aclara.

Type
string

---

accessibilityLanguage

iOS

Valor que indica qué idioma debe usar el lector de pantalla cuando el usuario interactúa con el elemento. Debe seguir la especificación BCP 47.

Consulta la documentación de iOS para accessibilityLanguage para más información.

Type
string

---

accessibilityIgnoresInvertColors

iOS

Valor que indica si esta vista debe o no invertirse cuando la inversión de color está activada. Un valor true indica que la vista no se invertirá incluso con la inversión de color activada.

Consulta la guía de Accesibilidad para más información.

Type
bool

---

accessibilityLabel

Sobrescribe el texto que lee el lector de pantalla al interactuar con el elemento. Por defecto, la etiqueta se construye recorriendo todos los hijos y acumulando nodos Text separados por espacios.

Type
string

---

accessibilityLiveRegion

Android

Indica a los servicios de accesibilidad si se debe notificar al usuario sobre cambios en esta vista. Solo funciona para Android API >= 19. Valores posibles:

• 'none' - Los servicios de accesibilidad no deben anunciar cambios en esta vista.

• 'polite' - Los servicios de accesibilidad deben anunciar cambios en esta vista.

• 'assertive' - Los servicios de accesibilidad deben interrumpir el habla en curso para anunciar inmediatamente cambios en esta vista.

Consulta la documentación de Android para View como referencia.

Type
enum('none', 'polite', 'assertive')

---

accessibilityRole

accessibilityRole comunica el propósito de un componente al usuario de una tecnología asistiva.

accessibilityRole puede ser uno de los siguientes:

• 'none' - Se usa cuando el elemento no tiene ningún rol.

• 'button' - Se usa cuando el elemento debe tratarse como un botón.

• 'link' - Se usa cuando el elemento debe tratarse como un enlace.

• 'search' - Se usa cuando un campo de texto también debe tratarse como campo de búsqueda.

• 'image' - Se usa cuando el elemento debe tratarse como una imagen. Puede combinarse con button o link, por ejemplo.

• 'keyboardkey' - Se usa cuando el elemento actúa como una tecla de teclado.

• 'text' - Se usa cuando el elemento debe tratarse como texto estático que no puede cambiar.

• 'adjustable' - Se usa cuando un elemento puede "ajustarse" (ej. un control deslizante).

• 'imagebutton' - Se usa cuando el elemento debe tratarse como botón y además es una imagen.

• 'header' - Se usa cuando un elemento actúa como encabezado de una sección de contenido (ej. título de barra de navegación).

• 'summary' - Se usa cuando un elemento puede proporcionar un resumen rápido de condiciones actuales al iniciar la app.

• 'alert' - Se usa cuando un elemento contiene texto importante para presentar al usuario.

• 'checkbox' - Se usa cuando un elemento representa una casilla verificable (puede estar marcada, desmarcada o en estado mixto).

• 'combobox' - Se usa cuando un elemento representa un cuadro combinado para seleccionar entre varias opciones.

• 'menu' - Se usa cuando el componente es un menú de opciones.

• 'menubar' - Se usa cuando un componente es contenedor de múltiples menús.

• 'menuitem' - Se usa para representar un ítem dentro de un menú.

• 'progressbar' - Se usa para representar un componente que indica progreso de una tarea.

• 'radio' - Se usa para representar un botón de opción.

• 'radiogroup' - Se usa para representar un grupo de botones de opción.

• 'scrollbar' - Se usa para representar una barra de desplazamiento.

• 'spinbutton' - Se usa para representar un botón que abre una lista de opciones.

• 'switch' - Se usa para representar un interruptor que puede activarse/desactivarse.

• 'tab' - Se usa para representar una pestaña.

• 'tablist' - Se usa para representar una lista de pestañas.

• 'timer' - Se usa para representar un temporizador.

• 'toolbar' - Se usa para representar una barra de herramientas (contenedor de botones de acción o componentes).

• 'grid' - Usado con ScrollView, VirtualizedList, FlatList o SectionList para representar una cuadrícula. Añade anuncios de entrada/salida de cuadrícula al GridView de Android.

Type
string

---

accessibilityState

Describe el estado actual de un componente a usuarios de tecnologías asistivas.

Consulta la guía de Accesibilidad para más información.

Type
object: {disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}

---

accessibilityValue

Representa el valor actual de un componente. Puede ser una descripción textual del valor o, para componentes basados en rangos (como controles deslizantes y barras de progreso), contiene información de rango (mínimo, actual y máximo).

Consulta la guía de Accesibilidad para más información.

Type
object: {min: number, max: number, now: number, text: string}

---

accessibilityViewIsModal

iOS

Valor que indica si VoiceOver debe ignorar elementos dentro de vistas hermanas del receptor. Por defecto es false.

Consulta la guía de Accesibilidad para más información.

Type
bool

---

accessible

Cuando es true, indica que la vista es un elemento de accesibilidad. Por defecto, todos los elementos táctiles son accesibles.

---

aria-busy

Indica que un elemento está siendo modificado y que las tecnologías asistivas pueden esperar a que finalicen los cambios antes de informar al usuario.

Type	Default
boolean	false

---

aria-checked

Indica el estado de un elemento seleccionable. Puede ser booleano o el string "mixed" para casillas mixtas.

Type	Default
boolean, 'mixed'	false

---

aria-disabled

Indica que el elemento es perceptible pero deshabilitado, por lo que no es editable ni operable.

Type	Default
boolean	false

---

aria-expanded

Indica si un elemento expandible está actualmente expandido o colapsado.

Type	Default
boolean	false

---

aria-hidden

Indica si los elementos de accesibilidad contenidos dentro de este elemento están ocultos.

Por ejemplo, en una ventana que contiene vistas hermanas A y B, establecer aria-hidden en true en la vista B hace que VoiceOver ignore los elementos de la vista B.

Type	Default
boolean	false

---

aria-label

Define un valor de cadena que etiqueta un elemento interactivo.

Type
string

---

aria-labelledby

Android

Identifica el elemento que etiqueta al elemento donde se aplica. El valor de aria-labelledby debe coincidir con el nativeID del elemento relacionado:

tsx

<View>
  <Text nativeID="formLabel">Label for Input Field</Text>
  <TextInput aria-label="input" aria-labelledby="formLabel" />
</View>

Type
string

---

aria-live

Android

Indica que un elemento se actualizará y describe los tipos de actualizaciones que pueden esperar las tecnologías asistivas.

• off Los servicios de accesibilidad no deben anunciar cambios en esta vista.

• polite Los servicios de accesibilidad deben anunciar cambios en esta vista.

• assertive Los servicios de accesibilidad deben interrumpir el habla en curso para anunciar inmediatamente los cambios en esta vista.

Type	Default
enum('assertive', 'off', 'polite')	'off'

---

aria-modal

iOS

Valor booleano que indica si VoiceOver debe ignorar elementos en vistas hermanas del receptor. Tiene prioridad sobre la propiedad accessibilityViewIsModal.

Type	Default
boolean	false

---

aria-selected

Indica si un elemento seleccionable está actualmente seleccionado o no.

Type
boolean

aria-valuemax

Representa el valor máximo para componentes basados en rangos, como controles deslizantes y barras de progreso. Tiene prioridad sobre el valor max en la propiedad accessibilityValue.

Type
number

---

aria-valuemin

Representa el valor mínimo para componentes basados en rangos, como controles deslizantes y barras de progreso. Tiene prioridad sobre el valor min en la propiedad accessibilityValue.

Type
number

---

aria-valuenow

Representa el valor actual para componentes basados en rangos, como controles deslizantes y barras de progreso. Tiene prioridad sobre el valor now en la propiedad accessibilityValue.

Type
number

---

aria-valuetext

Representa la descripción textual del componente. Tiene prioridad sobre el valor text en la propiedad accessibilityValue.

Type
string

---

collapsable

Las vistas usadas solo para organizar hijos o que no dibujan contenido pueden eliminarse automáticamente de la jerarquía nativa como optimización. Establece esta propiedad en false para desactivar esta optimización y garantizar que este View exista en la jerarquía de vistas nativa.

Type	Default
boolean	true

---

collapsableChildren

Establecerlo en false evita que los hijos directos de la vista sean eliminados de la jerarquía de vistas nativa, similar al efecto de configurar collapsable={false} en cada hijo.

Type	Default
boolean	true

---

focusable

Android

Indica si esta View debe ser enfocable con dispositivos de entrada no táctiles (ej. recibir foco con teclado físico).

Type
boolean

---

hitSlop

Define la distancia máxima desde la vista donde puede iniciar un evento táctil. Las pautas de interfaz típicas recomiendan áreas táctiles de al menos 30-40 puntos/píxeles independientes de densidad.

Por ejemplo: si una vista táctil mide 20px de alto, su altura táctil puede extenderse a 40px con hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}

El área táctil nunca excede los límites de la vista padre y el Z-index de vistas hermanas siempre tiene prioridad si un toque coincide en dos vistas superpuestas.

Type
object: {top: number, left: number, bottom: number, right: number}

---

id

Usado para localizar esta vista desde clases nativas. Tiene prioridad sobre la prop nativeID.

¡Esto desactiva la optimización de "eliminación de vistas solo de diseño" para esta vista!

Type
string

---

importantForAccessibility

Android

Controla la importancia de esta vista para accesibilidad: si genera eventos de accesibilidad y si se reporta a servicios de accesibilidad. Solo para Android.

Valores posibles:

• 'auto' - El sistema determina si la vista es importante para accesibilidad - valor por defecto (recomendado).

• 'yes' - La vista es importante para accesibilidad.

• 'no' - La vista no es importante para accesibilidad.

• 'no-hide-descendants' - La vista no es importante para accesibilidad, ni tampoco sus vistas descendientes.

Consulta la documentación de Android para importantForAccessibility como referencia.

Type
enum('auto', 'yes', 'no', 'no-hide-descendants')

---

nativeID

Usado para localizar esta vista desde clases nativas.

¡Esto desactiva la optimización de "eliminación de vistas solo de diseño" para esta vista!

Type
string

---

needsOffscreenAlphaCompositing

Indica si esta View debe renderizarse fuera de pantalla y componerse con alfa para preservar colores 100% correctos y comportamiento de mezcla. El valor por defecto (false) recurre a dibujar el componente y sus hijos aplicando alfa en la pintura de cada elemento, en lugar de renderizar el componente completo fuera de pantalla y recomponerlo con alfa. Este comportamiento por defecto puede ser perceptible y no deseado cuando la View con opacidad tiene múltiples elementos superpuestos (ej. varias Views superpuestas o texto con fondo).

Renderizar fuera de pantalla para preservar comportamiento alfa correcto es extremadamente costoso y difícil de depurar para desarrolladores no nativos, por lo que no está activado por defecto. Si necesitas habilitar esta propiedad para animaciones, considera combinarla con renderToHardwareTextureAndroid si el contenido de la vista es estático (no necesita redibujarse cada fotograma). Si esa propiedad está habilitada, esta View se renderizará fuera de pantalla una vez, se guardará como textura hardware y luego se recompondrá en pantalla con alfa cada fotograma sin cambiar objetivos de renderizado en la GPU.

Type
bool

---

nextFocusDown

Android

Designa la siguiente vista que recibirá el enfoque al navegar hacia abajo. Ver documentación de Android.

Type
number

---

nextFocusForward

Android

Designa la siguiente vista que recibirá el enfoque al navegar hacia adelante. Ver documentación de Android.

Type
number

---

nextFocusLeft

Android

Designa la siguiente vista que recibirá el enfoque al navegar hacia la izquierda. Ver documentación de Android.

Type
number

---

nextFocusRight

Android

Designa la siguiente vista que recibirá el enfoque al navegar hacia la derecha. Ver documentación de Android.

Type
number

---

nextFocusUp

Android

Designa la siguiente vista que recibirá el enfoque al navegar hacia arriba. Ver documentación de Android.

Type
number

---

onAccessibilityAction

Se invoca cuando el usuario realiza acciones de accesibilidad. El único argumento es un evento que contiene el nombre de la acción a realizar.

Consulta la guía de Accesibilidad para más información.

Type
function

---

onAccessibilityEscape

iOS

Cuando accessible es true, el sistema invocará esta función al realizar el gesto de escape.

Type
function

---

onAccessibilityTap

iOS

Cuando accessible es true, el sistema intentará invocar esta función al realizar el gesto táctil de accesibilidad.

Type
function

---

onLayout

Se invoca al montar y en cambios de diseño.

Este evento se dispara inmediatamente después de calcular el diseño, aunque el nuevo diseño podría no verse reflejado aún en pantalla cuando se recibe el evento, especialmente si hay una animación de diseño en curso.

Type
({nativeEvent: LayoutEvent}) => void

---

onMagicTap

iOS

Cuando accessible es true, el sistema invocará esta función al realizar el gesto "magic tap".

Type
function

---

onMoveShouldSetResponder

¿Esta vista desea "reclamar" la capacidad de responder a toques? Se llama para cada movimiento táctil en la View cuando no es la respondedora actual.

Type
({nativeEvent: PressEvent}) => boolean

---

onMoveShouldSetResponderCapture

Si una View padre quiere evitar que una View hija se convierta en respondedora durante un movimiento, debe tener este manejador que devuelve true.

Type
({nativeEvent: PressEvent}) => boolean

---

onResponderGrant

La vista ahora responde a eventos táctiles. Es el momento de resaltar y mostrar al usuario lo que está sucediendo.

En Android, devuelve true desde este callback para evitar que otros componentes nativos se conviertan en respondedores hasta que este termine.

Type
({nativeEvent: PressEvent}) => void ｜ boolean

---

onResponderMove

El usuario está moviendo su dedo.

Type
({nativeEvent: PressEvent}) => void

---

onResponderReject

Ya hay otro respondedor activo que no liberará el control a esa View que solicita ser respondedora.

Type
({nativeEvent: PressEvent}) => void

---

onResponderRelease

Se activa al finalizar el toque.

Type
({nativeEvent: PressEvent}) => void

---

onResponderTerminate

La capacidad de respuesta ha sido quitada de la View. Puede ser tomada por otras vistas después de llamar a onResponderTerminationRequest, o por el sistema operativo sin preguntar (ej: centro de control/notificaciones en iOS).

Type
({nativeEvent: PressEvent}) => void

---

onResponderTerminationRequest

Otra View quiere convertirse en respondedora y solicita a esta View que libere su respuesta. Devolver true permite liberarla.

Type
({nativeEvent: PressEvent}) => void

---

onStartShouldSetResponder

¿Esta vista quiere convertirse en respondedora al inicio de un toque?

Type
({nativeEvent: PressEvent}) => boolean

---

onStartShouldSetResponderCapture

Si una View padre quiere evitar que una View hija se convierta en respondedora al inicio de un toque, debe tener este manejador que devuelve true.

Type
({nativeEvent: PressEvent}) => boolean

---

pointerEvents

Controla si la View puede ser objetivo de eventos táctiles.

• 'auto': La vista puede ser objetivo de eventos táctiles.

• 'none': La vista nunca es objetivo de eventos táctiles.

• 'box-none': La vista nunca es objetivo de eventos táctiles, pero sus subvistas sí pueden serlo. Se comporta como si tuviera estas clases CSS:

css

.box-none {
  pointer-events: none;
}
.box-none * {
  pointer-events: auto;
}

• 'box-only': La vista puede ser objetivo de eventos táctiles, pero sus subvistas no. Se comporta como si tuviera estas clases CSS:

css

.box-only {
  pointer-events: auto;
}
.box-only * {
  pointer-events: none;
}

Type
enum('box-none', 'none', 'box-only', 'auto')

---

removeClippedSubviews

Esta propiedad de rendimiento reservada (expuesta por RCTView) es útil para contenido desplazable con muchas subvistas fuera de pantalla. Para su efectividad, debe aplicarse a una vista con subvistas que excedan sus límites. Las subvistas deben tener overflow: hidden, al igual que la vista contenedora (o una superior).

Type
bool

---

renderToHardwareTextureAndroid

Android

Determina si esta View debe renderizarse (y todas sus hijas) en una única textura de hardware en la GPU.

En Android, es útil para animaciones e interacciones que solo modifican opacidad, rotación, traslación o escala: en estos casos, la vista no necesita redibujarse ni reejecutar listas de visualización. La textura puede reutilizarse con diferentes parámetros. La desventaja es el consumo de memoria de video limitada, por lo que esta propiedad debe restablecerse a false después de la interacción o animación.

Type
bool

---

role

role comunica el propósito de un componente a usuarios de tecnologías asistivas. Tiene precedencia sobre la prop accessibilityRole.

Type
Role

---

shouldRasterizeIOS

iOS

Determina si esta View debe renderizarse como mapa de bits antes de la composición.

En iOS, es útil para animaciones/interacciones que no modifican dimensiones del componente ni sus hijos. Por ejemplo, al trasladar una vista estática, la rasterización permite reutilizar un mapa de bits en caché y componerlo rápidamente en cada fotograma.

La rasterización implica un paso de dibujo fuera de pantalla y consume memoria. Prueba y mide al usar esta propiedad.

Type
bool

---

style

Type
View Style

---

tabIndex

Android

Determina si esta View debe ser enfocable con dispositivos de entrada no táctiles (ej. recibir foco con teclado físico). Admite estos valores:

• 0 - La vista es enfocable

• -1 - La vista no es enfocable

Type
enum(0, -1)

---

testID

Usado para localizar esta vista en pruebas end-to-end.

¡Esto desactiva la optimización de "eliminación de vistas solo de diseño" para esta vista!

Type
string