PanResponder

PanResponder は複数のタッチを単一のジェスチャーに統合します。シングルタッチジェスチャーを余分なタッチの影響から保護し、基本的なマルチタッチジェスチャーの認識に使用できます。

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

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

onPanResponderMove: (event, gestureState) => {}

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

gestureStateオブジェクトには、以下のプロパティがあります。

• stateID - gestureState の ID。画面上に少なくとも1つのタッチがある限り保持されます。
• 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 と連携して、UI に複雑なジェスチャーを作成するのに役立ちます。次の例では、画面上で自由にドラッグできるアニメーション化されたViewコンポーネントが含まれています。

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

---

参照

メソッド

create()

static create(config: PanResponderCallbacks): PanResponderInstance;

パラメーター

名前	型	説明
config 必須	オブジェクト	下記参照

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

一般的に、キャプチャ相当のイベントについては、キャプチャフェーズで一度gestureStateを更新し、バブルフェーズでも使用できます。

onStartShould*コールバックには注意してください。これらは、ノードにバブル/キャプチャされる開始/終了イベントに対してのみ、更新されたgestureStateを反映します。ノードがレスポンダになると、ジェスチャーによって処理されるすべての開始/終了イベントと、それに応じて更新されるgestureStateに依存できます。(numberActiveTouches)は、レスポンダでない限り、完全に正確ではない可能性があります。