Pressable

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 →

Pressable es un componente envoltorio principal que puede detectar varias etapas de interacciones de pulsación en cualquiera de sus elementos hijos definidos.

tsx

<Pressable onPress={onPressFunction}>
  <Text>I'm pressable!</Text>
</Pressable>

Cómo funciona

En un elemento envuelto por Pressable:

• onPressIn se llama cuando se activa una pulsación.

• onPressOut se llama cuando el gesto de pulsación se desactiva.

Tras activar onPressIn, ocurrirá una de dos cosas:

1. La persona retirará el dedo, activando onPressOut seguido de onPress.

2. Si la persona mantiene el dedo más de 500 milisegundos antes de retirarlo, se activa onLongPress. (onPressOut aún se activará al retirar el dedo.)

Los dedos no son instrumentos de precisión, y es común que los usuarios activen accidentalmente el elemento equivocado o no alcancen el área de activación. Para ayudar, Pressable tiene un HitRect opcional que puedes usar para definir qué tan lejos del elemento envuelto puede registrarse un toque. Las pulsaciones pueden comenzar en cualquier punto dentro del HitRect.

PressRect permite que las pulsaciones se muevan más allá del elemento y su HitRect manteniendo la activación y siendo elegibles como "pulsación"—piensa en deslizar lentamente el dedo lejos de un botón que estás presionando.

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.

You can set HitRect with hitSlop and set PressRect with pressRetentionOffset.

Pressable utiliza la API Pressability de React Native. Para obtener más información sobre el flujo de la máquina de estados de Pressability y su funcionamiento, revisa la implementación de Pressability.

Ejemplo

Props

android_disableSound

Android

Si es verdadero, no reproduce el sonido del sistema Android al pulsar.

Type	Default
boolean	false

android_ripple

Android

Habilita el efecto de ondulación de Android y configura sus propiedades.

Type
RippleConfig

children

Elementos hijos o una función que recibe un booleano que indica si el componente está actualmente presionado.

Type
React Node

unstable_pressDelay

Duración (en milisegundos) para esperar después de pulsar antes de llamar a onPressIn.

Type
number

delayLongPress

Duración (en milisegundos) desde onPressIn antes de que se llame a onLongPress.

Type	Default
number	500

disabled

Si el comportamiento de pulsación está deshabilitado.

Type	Default
boolean	false

hitSlop

Establece distancia adicional fuera del elemento donde se puede detectar una pulsación.

Type
Rect or number

onHoverIn

Llamado cuando se activa el hover para proporcionar retroalimentación visual.

Type
({ nativeEvent: MouseEvent }) => void

onHoverOut

Llamado cuando se desactiva el hover para revertir la retroalimentación visual.

Type
({ nativeEvent: MouseEvent }) => void

onLongPress

Llamado si el tiempo después de onPressIn dura más de 500 milisegundos. Este período puede personalizarse con delayLongPress.

Type
({nativeEvent: PressEvent}) => void

onPress

Llamado después de onPressOut.

Type
({nativeEvent: PressEvent}) => void

onPressIn

Llamado inmediatamente cuando se inicia un toque, antes de onPressOut y onPress.

Type
({nativeEvent: PressEvent}) => void

onPressOut

Llamado cuando se libera un toque.

Type
({nativeEvent: PressEvent}) => void

pressRetentionOffset

Distancia adicional fuera de esta vista donde un toque se considera una pulsación antes de que se active onPressOut.

Type	Default
Rect or number	{bottom: 30, left: 20, right: 20, top: 20}

style

Estilos de vista o una función que recibe un booleano indicando si el componente está pulsado actualmente y devuelve estilos de vista.

Type
View Style or ({ pressed: boolean }) => View Style

testOnly_pressed

Se usa únicamente para documentación o pruebas (ej. pruebas de instantáneas).

Type	Default
boolean	false

Definiciones de tipos

RippleConfig

Configuración del efecto ripple para la propiedad android_ripple.

Type
object

Propiedades:

Name	Type	Required	Description
color	color	No	Defines the color of the ripple effect.
borderless	boolean	No	Defines if ripple effect should not include border.
radius	number	No	Defines the radius of the ripple effect.
foreground	boolean	No	Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.