PanResponder

PanResponderは、複数のタッチを1つのジェスチャーに調整します。これにより、シングルタッチのジェスチャーが余分なタッチに影響されにくくなり、基本的なマルチタッチジェスチャーの認識に使用できます。

デフォルトでは、PanResponderはInteractionManagerのハンドルを保持し、実行時間の長いJSイベントがアクティブなジェスチャーを中断するのをブロックします。

ジェスチャーレスポンダーシステムによって提供されるレスポンダーハンドラーの予測可能なラッパーを提供します。各ハンドラーに対して、ネイティブイベントオブジェクトとともに新しいgestureStateオブジェクトを提供します。

onPanResponderMove: (event, gestureState) => {}

ネイティブイベントは、PressEventの形式を持つ合成タッチイベントです。

gestureStateオブジェクトには次のものがあります

• stateID - gestureStateのIDです。画面上に少なくとも1つのタッチがある限り持続します。
• moveX - 最近移動したタッチの最新の画面座標
• moveY - 最近移動したタッチの最新の画面座標
• x0 - レスポンダーが付与されたときの画面座標
• y0 - レスポンダーが付与されたときの画面座標
• dx - タッチが開始されてからのジェスチャーの累積移動距離
• dy - タッチが開始されてからのジェスチャーの累積移動距離
• vx - ジェスチャーの現在の速度
• vy - ジェスチャーの現在の速度
• numberActiveTouches - 現在画面上にあるタッチの数

使用パターン

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

使用例

PanResponderはAnimated APIと連携して、UIで複雑なジェスチャーを構築するのに役立ちます。次の例には、画面上で自由にドラッグできるアニメーション化されたViewコンポーネントが含まれています。

RNTesterのPanResponderの例を試してみてください。

---

リファレンス

メソッド

create()

tsx

static create(config: PanResponderCallbacks): PanResponderInstance;

パラメータ

名前	型	説明
config 必須	object	以下を参照

configオブジェクトは、すべてのレスポンダーコールバックの拡張版を提供します。これにはPressEventだけでなく、PanResponderのジェスチャー状態も含まれます。これは、通常の各onResponder*コールバックのResponderという単語をPanResponderに置き換えることで実現されます。例えば、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)は、あなたがレスポンダーでない限り、完全に正確ではないかもしれません。