PanResponder

PanResponder 將數個觸控協調成單一手勢。它可以使單指觸控手勢更能抵抗額外的觸控，並可用於辨識基本的多點觸控手勢。

預設情況下，PanResponder 會持有 InteractionManager 控制代碼，以防止長時間執行的 JS 事件中斷活動中的手勢。

它為手勢回應器系統提供的回應器處理常式提供可預測的包裝器。對於每個處理常式，它都會提供一個新的 gestureState 物件以及原生事件物件

onPanResponderMove: (event, gestureState) => {}

原生事件是具有PressEvent形式的合成觸控事件。

gestureState 物件具有以下屬性

stateID - gestureState 的 ID - 只要螢幕上至少有一個觸控就持續存在
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 必填	物件	請參考下方

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

一般來說，對於具有 capture 等效項的事件，我們會在 capture 階段更新 gestureState 一次，並且也可以在 bubble 階段中使用它。

請小心 onStartShould* 回呼。它們僅反映 bubble/capture 到 Node 的 start/end 事件的更新 gestureState。一旦節點成為回應器，您就可以依賴手勢處理的每個 start/end 事件，並且 gestureState 會相應更新。（numberActiveTouches）可能不完全準確，除非您是回應器。

使用模式​

範例​

參考

方法​

create()​

使用模式

範例

方法

`create()`