[React-Native] 리액트 네이티브 제스쳐(Gestures)

리액트 네이티브에는 PanResponder라는 클래스를 제공해 줍니다.

 

이 클래스를 통해서 드래그 할때의 제스쳐를 확인할 수 있습니다.

 

컴포넌트에서 PanResponder를 사용하기 위해서는 PanResponder객체를 생성하고 컴포넌트의 렌더 함수에 적어주어야 합니다.

 

PanResponder는 반드시 콜백 함수가 필요한데, 간단히 살펴보겠습니다.

UNSAFE_componentWillMount() {
 this._panResponder = PanResponder.create({
  onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder
  onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder
  onPanResponderGrant: this._handlePanResponderGrant
  onPanResponderMove: this._handlePanResponderMove
  onPanResponderRelease: this._handlePanResponderEnd
  onPanResponderTerminate: this._handlePanResponderEnd
 });
}

// 아래 뷰
<View>
 <View
  {...this._panResponder.panHandlers}
 />
</View>

코드가 좀 복잡해 보일 수 있는데, 이런식으로 호출을 해줍니다.

 

UNSAFE_componentWillMount는 라이프사이클중의 하나인데 react-native에서 componentWillMount를 17버전에서부터는 삭제되면서 UNSAFE_componentWillMount으로대체되었습니다.

 

이제 핸들러들을 만들어 주어야 합니다. 꼭 필요한 부분만을 적었습니다.

_handleStartShouldSetPanResponder = (event, gestureState) => {
 // 어떠한 부분을 마우스 왼쪽을 누를때 responder 활성화 여부
 return true;
};
_handleMoveShouldSetPanResponder = (event, gestureState) => {
 // 어떠한 부분을 마우스 왼쪽을 누르고 움직일때 responder 활성화 여부
 return true;
};
_handlePanResponderMove = (event, gestureState) => {
 // 여기서 계산이 이루어집니다.
 // stateID
 // moveX
 // moveY
 // x0
 // y0
 // dx
 // dy
 // vx
 // vy
 // numberActiveTouches
};
_handlePanResponderEnd = (event, gestureState) => {
 // 마우스 왼쪽을 떼었을경우 실행할 코드
};

이렇게 적어준뒤 코드를 완성시켜주면 마우스를 누르면서 이동한 값들을 모두 받아올 수 있습니다.

 

이를 통해 앱에서의 터치드래그 이벤트를 만들어 적용시켜줄 수 있습니다.

 

예를 들어 밀어서 잠금해제 같은 기능이죠

 

풀로된 코드가 필요하시다면  댓글을 남겨주세요.