PanResponder

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 →

PanResponder reconcilia múltiples toques en un único gesto. Hace que los gestos de un solo toque sean resistentes a toques adicionales y puede utilizarse para reconocer gestos multitáctiles básicos.

Por defecto, PanResponder mantiene un manejador de InteractionManager para bloquear eventos JS de larga duración que podrían interrumpir gestos activos.

Proporciona un envoltorio predecible de los manejadores de respuesta del sistema de respondedores a gestos. Para cada manejador, ofrece un nuevo objeto gestureState junto con el evento nativo:

onPanResponderMove: (event, gestureState) => {}

Un evento nativo es un evento táctil sintético con forma de PressEvent.

Un objeto gestureState contiene lo siguiente:

• stateID - ID del gestureState, persiste mientras haya al menos un toque en pantalla

• moveX - últimas coordenadas en pantalla del toque movido recientemente

• moveY - últimas coordenadas en pantalla del toque movido recientemente

• x0 - coordenadas en pantalla al conceder el respondedor

• y0 - coordenadas en pantalla al conceder el respondedor

• dx - distancia acumulada del gesto desde que comenzó el toque

• dy - distancia acumulada del gesto desde que comenzó el toque

• vx - velocidad actual del gesto

• vy - velocidad actual del gesto

• numberActiveTouches - Número de toques activos actualmente en pantalla

Patrón de uso

tsx

const ExampleComponent = () => {
  const panResponder = React.useRef(
    PanResponder.create({
      // Ask to be the responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
        true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
        true,

      onPanResponderGrant: (evt, gestureState) => {
        // The gesture has started. Show visual feedback so the user knows
        // what is happening!
        // gestureState.d{x,y} will be set to zero now
      },
      onPanResponderMove: (evt, gestureState) => {
        // The most recent move distance is gestureState.move{X,Y}
        // The accumulated gesture distance since becoming responder is
        // gestureState.d{x,y}
      },
      onPanResponderTerminationRequest: (evt, gestureState) =>
        true,
      onPanResponderRelease: (evt, gestureState) => {
        // The user has released all touches while this view is the
        // responder. This typically means a gesture has succeeded
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // Another component has become the responder, so this gesture
        // should be cancelled
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // Returns whether this component should block native components from becoming the JS
        // responder. Returns true by default. Is currently only supported on android.
        return true;
      },
    }),
  ).current;

  return <View {...panResponder.panHandlers} />;
};

Ejemplo

PanResponder funciona con la API Animated para ayudar a construir gestos complejos en la UI. El siguiente ejemplo contiene un componente View animado que puede arrastrarse libremente por la pantalla:

Prueba el ejemplo de PanResponder en RNTester.

---

Referencia

Métodos

create()

tsx

static create(config: PanResponderCallbacks): PanResponderInstance;

Parámetros:

Name	Type	Description
config Required	object	Refer below

El objeto config proporciona versiones mejoradas de todas las devoluciones de llamada de respuesta, que incluyen no solo el PressEvent sino también el estado del gesto de PanResponder, reemplazando Responder por PanResponder en cada callback típico onResponder*. Por ejemplo, el objeto config se vería así:

• onMoveShouldSetPanResponder: (e, gestureState) => {...}

• onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}

• onStartShouldSetPanResponder: (e, gestureState) => {...}

• onStartShouldSetPanResponderCapture: (e, gestureState) => {...}

• onPanResponderReject: (e, gestureState) => {...}

• onPanResponderGrant: (e, gestureState) => {...}

• onPanResponderStart: (e, gestureState) => {...}

• onPanResponderEnd: (e, gestureState) => {...}

• onPanResponderRelease: (e, gestureState) => {...}

• onPanResponderMove: (e, gestureState) => {...}

• onPanResponderTerminate: (e, gestureState) => {...}

• onPanResponderTerminationRequest: (e, gestureState) => {...}

• onShouldBlockNativeResponder: (e, gestureState) => {...}

Generalmente, para eventos con equivalentes de captura, actualizamos gestureState en la fase de captura y podemos usarlo también en la fase de burbuja.

Ten cuidado con los callbacks onStartShould*. Solo reflejan el gestureState actualizado para eventos de inicio/fin que se propagan o capturan en el nodo. Una vez que el nodo es el respondedor, puedes confiar en que cada evento de inicio/fin será procesado por el gesto y que gestureState se actualizará en consecuencia. (numberActiveTouches) puede no ser totalmente preciso a menos que seas el respondedor.