개요

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

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

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

어린이용 단어 공부 앱

블라부

세상의 모든 정보를 모아보다

씨로그

JLPT 일본어 단어앱

일단 공부

토익 영어 단어앱

토익 단어앱

중고등 영어 단어앱

중고등 영단어앱

HSK 중국어 단어앱

중국어 단어앱

독일어 단어앱

독일어 단어장

러시아어 단어앱

러시아어 단어장

아랍어 단어앱

아랍어 단어장

인도네시아 단어앱

인도네시아 단어장

프랑스어 단어앱

프랑스어 단어장

스페인어 단어앱

스페인어 단어장

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

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

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

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

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