개요

RN(React Native) 프로젝트를 진행하다 유저의 스와이프(Swipe) 방향에 따라 다른 동작을 하는 기능을 추가하게 되었습니다. 그래서 검색해 보니 react-native-swipe-gestures라는 라이브러리를 발견하고 적용해 보았습니다. 이 블로그는 react-native-swipe-gestures를 설치하고 사용하는 방법에 대해서 설명합니다.

• react-native-swipe-gestures 공식 사이트: https://github.com/glepur/react-native-swipe-gestures

설치

아래에 명령어를 통해 react-native-swipe-gestures 라이브러리를 설치합니다.

npm install --save react-native-swipe-gestures

사용 방법

RN(React Native)에서 유저의 스와이프(Swipe)를 감지하기 위해 아래와 같이 소스를 수정합니다.

...
import GestureRecognizer from 'react-native-swipe-gestures';
...

render() {
  <GestureRecognizer
          onSwipeLeft={this._onSwipeLeft}
          onSwipeRight={this._onSwipeRight}
          config={{
            velocityThreshold: 0.3,
            directionalOffsetThreshold: 80,
          }}
          style={{
            flex: 1,
          }}>
          ...
  </GestureRecognizer>
}
...
private _onSwipeLeft = gestureState => {
  ...
  this.setState({
    ...
  });
};

private _onSwipeRight = gestureState => {
  ...
  this.setState({
    ...
  });
  ...
};

완료

이것으로 RN(React Native)에서 유저의 스와이프(Swipe) 동작을 감지하는 방법에 대해서 알아보았습니다. 간단한 기능도 점점 코딩을 하지 않고 복사 붙여넣기를 하고 있는 제 자신을 발견했네요… react-native-swipe-gestures 소스가 그리 길지 않으므로 소스를 보고 직접 구현하시는 것도 재미있을거 같습니다.

참고

• react-native-swipe-gestures 공식 사이트: https://github.com/glepur/react-native-swipe-gestures

Github Sponsor Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

책 홍보

저도 블로그를 시작한지 1년만에...책을 다 써봅니다...인생에서 이런 날도 오는군요...타국에서 책 출판도 할 수 있고, 참 좋은 세상입니다.

이번에 쓴 책은 스무디 한 잔 마시며 끝내는 React Native입니다. 다양한 예제를 통해 리액트 네이티브를 공부할 수 있도록 구성해 보았습니다. 또한 설치부터 배포까지 실전에서도 사용할 수 있는 내용들을 담고 있습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

• yes24: 구매하기
• 교보문고: 구매하기
• 알라딘: 구매하기
• 쿠팡: 구매하기