TouchableWithoutFeedback
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Si buscas una forma más completa y preparada para el futuro de manejar entradas táctiles, consulta la API Pressable.
No lo uses a menos que tengas una muy buena razón. Todos los elementos que responden a pulsaciones deben tener retroalimentación visual al tocarse.
TouchableWithoutFeedback solo admite un hijo. Si deseas tener varios componentes hijos, envuélvelos en una View. Es importante destacar que TouchableWithoutFeedback funciona clonando su hijo y aplicándole propiedades de respuesta. Por lo tanto, cualquier componente intermedio debe pasar estas propiedades al componente subyacente de React Native.
Patrón de uso
function MyComponent(props: MyComponentProps) {
return (
<View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
<Text>My Component</Text>
</View>
);
}
<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
<MyComponent />
</TouchableWithoutFeedback>;
Ejemplo
Referencia
Propiedades
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 |
|---|
| Boolean |
accessible
Cuando es true, indica que la vista es un elemento de accesibilidad. Por defecto, todos los elementos táctiles son accesibles.
| 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 |
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 |
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 |
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).
| 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} |
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 |
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 el elemento está oculto para las tecnologías asistivas.
Por ejemplo, en una ventana con vistas hermanas A y B, establecer aria-hidden en true en la vista B hace que VoiceOver ignore el elemento B y sus hijos.
| Type | Default |
|---|---|
| boolean | false |
aria-label
Define un valor de cadena que etiqueta un elemento interactivo.
| 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 |
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 |
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} |
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 |
delayLongPress
Duración (en milisegundos) desde onPressIn antes de que se llame a onLongPress.
| Type |
|---|
| number |
delayPressIn
Duración (en milisegundos), desde el inicio del toque, antes de que se llame a onPressIn.
| Type |
|---|
| number |
delayPressOut
Duración (en milisegundos), desde la liberación del toque, antes de que se llame a onPressOut.
| Type |
|---|
| number |
disabled
Si es verdadero, desactiva todas las interacciones para este componente.
| Type |
|---|
| bool |
hitSlop
Define qué tan lejos puede comenzar tu toque desde el botón. Se suma a pressRetentionOffset al moverse fuera del botón.
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 |
|---|
| Rect or number |
id
Usado para localizar esta vista desde código nativo. Tiene prioridad sobre la propiedad nativeID.
| Type |
|---|
| string |
onBlur
Se invoca cuando el elemento pierde el foco.
| Type |
|---|
({nativeEvent: TargetEvent}) => void |
onFocus
Se invoca cuando el elemento recibe el foco.
| Type |
|---|
({nativeEvent: TargetEvent}) => void |
onLayout
Se invoca al montar y en cambios de diseño.
| Type |
|---|
({nativeEvent: LayoutEvent}) => void |
onLongPress
Se llama si el tiempo después de onPressIn supera los 370 milisegundos. Este período puede personalizarse con delayLongPress.
| Type |
|---|
| function |
onPress
Se llama al liberar el toque, excepto si se cancela (ej. por un desplazamiento que toma el control). El primer argumento es un evento de tipo PressEvent.
| Type |
|---|
| function |
onPressIn
Se llama inmediatamente al presionar el elemento, incluso antes de onPress. Útil para solicitudes de red. El primer argumento es un evento de tipo PressEvent.
| Type |
|---|
| function |
onPressOut
Se llama inmediatamente al liberar el toque, antes que onPress. El primer argumento es un evento de tipo PressEvent.
| Type |
|---|
| function |
pressRetentionOffset
Cuando la vista de desplazamiento está deshabilitada, esto define qué tan lejos puede moverse tu toque fuera del botón antes de desactivarlo. Una vez desactivado, al moverlo de vuelta verás que el botón se reactiva. Mueve el toque varias veces mientras la vista de desplazamiento está deshabilitada. Pasa una constante para reducir asignaciones de memoria.
| Type |
|---|
| Rect or number |
nativeID
| Type |
|---|
| string |
testID
Usado para localizar esta vista en pruebas end-to-end.
| Type |
|---|
| string |
touchSoundDisabled Android
Si es verdadero, no reproduce sonidos del sistema al tocar.
| Type |
|---|
| Boolean |