PanResponder

PanResponder는 여러 터치를 하나의 제스처로 통합한다. 단일 터치 제스처가 추가 터치에 영향을 받지 않도록 하며, 기본적인 멀티 터치 제스처를 인식하는 데 사용할 수 있다.

기본적으로 PanResponder는 InteractionManager 핸들을 통해 실행 중인 제스처가 장시간 실행되는 JS 이벤트에 방해받지 않도록 한다.

PanResponder는 제스처 응답 시스템에서 제공하는 응답 핸들러를 예측 가능한 형태로 감싼다. 각 핸들러는 네이티브 이벤트 객체와 함께 새로운 gestureState 객체를 제공한다:

onPanResponderMove: (event, gestureState) => {}

네이티브 이벤트는 PressEvent 형태의 합성 터치 이벤트이다.

gestureState 객체는 다음과 같은 정보를 포함한다:

• stateID - 화면에 최소 하나의 터치가 있는 동안 유지되는 제스처 상태 ID
• moveX - 최근 이동한 터치의 화면 좌표
• moveY - 최근 이동한 터치의 화면 좌표
• x0 - 응답이 시작된 시점의 화면 좌표
• y0 - 응답이 시작된 시점의 화면 좌표
• dx - 터치가 시작된 이후 제스처의 누적 이동 거리
• dy - 터치가 시작된 이후 제스처의 누적 이동 거리
• vx - 현재 제스처의 속도
• vy - 현재 제스처의 속도
• numberActiveTouches - 현재 화면에 있는 터치의 수

사용 패턴

tsx

const ExampleComponent = () => {
  const panResponder = React.useRef(
    PanResponder.create({
      // 응답자로 지정 요청
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) =>
        true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
        true,

      onPanResponderGrant: (evt, gestureState) => {
        // 제스처가 시작됨. 사용자에게 시각적 피드백 제공
        // gestureState.d{x,y}는 이제 0으로 설정됨
      },
      onPanResponderMove: (evt, gestureState) => {
        // 가장 최근의 이동 거리는 gestureState.move{X,Y}
        // 응답자가 된 이후 누적된 제스처 거리는 gestureState.d{x,y}
      },
      onPanResponderTerminationRequest: (evt, gestureState) =>
        true,
      onPanResponderRelease: (evt, gestureState) => {
        // 사용자가 모든 터치를 해제했고 이 뷰가 응답자임. 일반적으로 제스처가 성공했음을 의미
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // 다른 컴포넌트가 응답자가 됨. 따라서 이 제스처는 취소되어야 함
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // 이 컴포넌트가 기본 컴포넌트가 JS 응답자가 되는 것을 차단할지 여부를 반환. 기본값은 true. 현재 안드로이드에서만 지원
        return true;
      },
    }),
  ).current;

  return <View {...panResponder.panHandlers} />;
};

예제

PanResponder는 Animated API와 함께 작동하여 UI에서 복잡한 제스처를 구현하는 데 도움을 준다. 아래 예제는 화면을 자유롭게 드래그할 수 있는 애니메이션된 View 컴포넌트를 포함한다.

RNTester의 PanResponder 예제를 직접 확인해 보자.

참조

메서드

create()

tsx

static create(config: PanResponderCallbacks): PanResponderInstance;

매개변수:

이름	타입	설명
config 필수	object	아래 참조

config 객체는 일반적인 onResponder* 콜백에서 Responder라는 단어를 PanResponder로 대체하여, PressEvent뿐만 아니라 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)는 응답자가 아닌 경우 완전히 정확하지 않을 수 있다.