Saltar al contenido principal

TouchableWithoutFeedback

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 →

consejo

Si buscas una forma más completa y preparada para el futuro de manejar entradas táctiles, revisa 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​

tsx
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

Props​

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.

TypeDefault
booleanfalse

aria-checked​

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

TypeDefault
boolean, 'mixed'false

aria-disabled​

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

TypeDefault
booleanfalse

aria-expanded​

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

TypeDefault
booleanfalse

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.

TypeDefault
booleanfalse

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.

TypeDefault
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.

TypeDefault
booleanfalse

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.

nota

El área táctil nunca se extiende más allá de los límites de la vista padre, y el Z-index de vistas hermanas siempre tiene prioridad si un toque coincide con 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