PanResponder

PanResponder объединяет несколько касаний в одно жестом. Это делает однокасательные жесты устойчивыми к дополнительным касаниям и может использоваться для распознавания основных многокасательных жестов.

По умолчанию PanResponder содержит InteractionManager обработку, чтобы предотвратить прерывание активных жестов долгими событиями JS.

Он предоставляет предсказуемую оболочку для обработчиков отвечающих на жесты, предоставленных системой системы обработки жестов. Для каждого обработчика он предоставляет новый gestureState объект вместе с объектом нативного события:

onPanResponderMove: (event, gestureState) => {}

Нативное событие — это синтетическое событие касания в виде PressEvent.

Объект gestureState содержит следующее:

• stateID — ID состояния жеста, сохраняющийся до тех пор, пока на экране есть хотя бы одно касание
• moveX — последние координаты на экране недавно перемещенного касания
• moveY — последние координаты на экране недавно перемещенного касания
• x0 — координаты на экране, где произошло предоставление ответа на жест
• y0 — координаты на экране, где произошло предоставление ответа на жест
• dx — накопленное расстояние жеста с момента начала касания
• dy — накопленное расстояние жеста с момента начала касания
• vx — текущая скорость жеста
• vy — текущая скорость жеста
• numberActiveTouches — количество касаний на данный момент на экране

Шаблон использования

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} />;
};

PanResponder работает с Animated API, чтобы помочь в создании сложных жестов в пользовательском интерфейсе. Следующий пример содержит анимированный View компонент, который можно свободно перетаскивать по экрану

• Компонент функции
• Компонент класса

Попробуйте пример PanResponder в RNTester.

Ссылка

Методы

create()

static create(config)

Параметры:

Объект config предоставляет улучшенные версии всех обратных вызовов обработчика, предоставляющие не только PressEvent, но также и состояние жеста PanResponder, заменяя слово Responder на PanResponder в каждом из типичных onResponder* обратных вызовов. Например, объект config будет выглядеть так:

• 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) => {...}

В общем случае для событий, имеющих эквиваленты захвата, мы обновляем состояние жеста один раз на фазе захвата и можем использовать его также на фазе распространения.

Будьте внимательны с onStartShould* обратными вызовами. Они отражают только обновленное gestureState для событий начала/окончания, которые распространяются/захватываются узлом. После того, как узел стал отвечающим, вы можете полагаться на то, что каждое событие начала/окончания будет обработано жестом, и gestureState будет обновлено соответственно. (numberActiveTouches) может не быть полностью точным, если вы не являетесь отвечающим.