PanResponder

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

기본적으로 PanResponder는 InteractionManager 핸들을 유지하여 실행 시간이 긴 JS 이벤트가 활성 제스처를 방해하지 않도록 한다.

PanResponder는 제스처 응답 시스템에서 제공하는 응답 핸들러를 예측 가능한 형태로 감싸준다. 각 핸들러에 대해 네이티브 이벤트 객체와 함께 새로운 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({
      // 응답자 요청
      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 객체는 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)는 응답자가 아닌 경우 완전히 정확하지 않을 수 있다.

사용 패턴​

예제​

참조

메서드​

create()​

사용 패턴

예제

메서드

`create()`