[React Native] PanResponder

🎈노마드코더의 React Native 마스터클래스 Part4 ANIMATIONS AND INTERACTIONS 강의를 듣고있다. PanResponder 라는 React Native API 를 공부했는데 좀더 자세히 알고싶어서 공식문서를 살펴보려한다!

PanResponder

• PanResponder는 여러 터치를 단일 제스처로 조정한다.
• 추가 터치에 대한 단일 터치 제스처를 복원하고 기본 멀티 터치 제스처를 인식하는 데 사용할 수 있다.
• 기본적으로 PanResponder는 활성 제스처를 방해하는 장기 실행 js 이벤트를 차단하는 InteractionManager 을 보유한다.

공식문서에 설명되어있는것을 그대로 번역한것인데.. 조금 어렵 그래서.. 도대체 이게 뭐냐구ㅎㅎ

I think..터치 및 제스처이벤트를 핸들링할 수 있는 친구🙋‍♀️ 인것으로 보인다. 포괄해서 터치라고 표현하겠다.

PanResponder 생성 및 컴포넌트와의 결합

import React, {useRef} from "react";
import {Animated, PanResponder} from "react-native";
import styled from "styled-components/native"

const Container = styled.View`
	flex:1;
	justify-content:center;
	align-items:center;
`
const Box = styled.View`
	background-color:tomato;
	height:200px;
	width:200px;
`
const AnimatedBox = Animated.createAnimatedComponent(Box)

export default function App(){
  const POSITION = useRef(
    new Animated.ValueXY({
      x:0,
      y:0,
    }),
   ).current
const panResponder = useRef(
  PanResponder.create({
  	//터치 이벤트 사이클에 접근할 수 있는 함수들을 추가
  })
).current

return (
	<Container>
    	<AnimatedBox
          {...panResponder.panHandlers}
          style={{
     		 transform:POSITION.getTranslateTransform()
     		 }}
         />
    </Container>
  )

1. PanResponder 생성

const panResponder = useRef(
  PanResponder.create({
 	 //터치 이벤트 사이클에 접근할 수 있는 함수들을 추가
  })
).current

PanResponder를 만들어주고 console.log(panResponder)을 보면 안에 panHandlers가 들어있는데 handlers안에 들어있는 함수들을 이용해서 터치 정보들에 접근 할 수 있다!

2. 컴포넌트와의 결합

return (
	<Container>
    	<AnimatedBox
          {...panResponder.panHandlers}
          style={{
     		 transform:POSITION.getTranslateTransform()
     		 }}
         />
    </Container>
  )

터치 이벤트를 핸들링하고 싶은 View에 handlers를 결합시켜 준다.

터치 이벤트를 핸들링 할 수있는 함수들

panHandlers를 까보면 여러 함수들이 들어있다.

onStartShouldSetPanResponder:(evt, gestureState)=>true,
onStartShouldSetPanResponderCapture:(evt, gestureState) => true,
onMoveShouldSetPanResponder:(evt, gestureState)=> true,
onMoveShouldSetPanResponderCapture:(evt, gestureState)=> true,

주어진 터치 이벤트에 응답 할것인가 말것인가. 결정하는 함수인데 리턴을 true 라고 해주면 제스처 이벤트 감지를 시작한다. 위 함수4개가 같은 용도로 쓰이는것 같은데 각각의 차이점은 파악하지 못했다..

onPanResponderGrant:(evt, gestureState) => {
}

터치 이벤트가 발생할 때 호출되는 함수

onPanResponderMove:(evt, gestureState) => {
}

터치 이벤트가 진행 중일 때 호출 되는 함수 (움직이는 동안 계~ 속 호출됨)

onPanResponderRelease:(evt, gestureState) => {
}

터치 이벤트가 끝났을 때 호출 되는 함수(손때니까 호출됨)

참고로 나는 onStartShouldSetPanResponder,onPanResponderGrant,onPanResponderMove,onPanResponderRelease 를 사용하여 구현해 보았다.

gestureState

gestureState를 까보면 아래와 같은 정보들이 들어있다.

• stateID: 제스처 상태의 ID (화면에 하나 이상의 터치가 있는 한 지속됨)
• moveX, moveY: 최근 이동한 터치의 최신 화면 좌표 (View의 중심이 아니라 터치한 좌표)
• x0, y0: 응답자 부여의 화면 좌표
• dx, dy: 터치가 시작된 이후 제스처의 누적거리
• vx, by: 제스처의 현재 속도
• numberActiveTouches: 현재 화면의 터치 수

moveX = x0 + dx
moveY = y0 + dy

으악 어렵다! 계속 공부해보쟈!!