PanResponder
PanResponder は、複数のタッチを単一のジェスチャーに統合します。これにより、シングルタッチジェスチャーは余分なタッチに対して堅牢になり、基本的なマルチタッチジェスチャーの認識にも使用できます。
デフォルトでは、PanResponder は InteractionManager ハンドルを保持し、長時間実行される JS イベントがアクティブなジェスチャーを中断するのをブロックします。
ジェスチャーレスポンダーシステムによって提供されるレスポンダーハンドラの予測可能なラッパーを提供します。各ハンドラには、ネイティブイベントオブジェクトとともに新しい gestureState オブジェクトが提供されます。
onPanResponderMove: (event, gestureState) => {}
ネイティブイベントは、PressEvent の形式を持つ合成タッチイベントです。
gestureState オブジェクトは以下を含みます
stateID- 画面上に少なくとも1つのタッチがある限り保持される gestureState の IDmoveX- 最近移動したタッチの最新のスクリーン座標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 の例を試してみてください。
リファレンス
Methods
create()
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) は、レスポンダーでない限り完全に正確ではない場合があります。