개요
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
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
책 홍보
저도 블로그를 시작한지 1년만에...책을 다 써봅니다...인생에서 이런 날도 오는군요...타국에서 책 출판도 할 수 있고, 참 좋은 세상입니다.
이번에 쓴 책은
아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.
이번에 쓴 책은
스무디 한 잔 마시며 끝내는 React Native입니다. 다양한 예제를 통해 리액트 네이티브를 공부할 수 있도록 구성해 보았습니다. 또한 설치부터 배포까지 실전에서도 사용할 수 있는 내용들을 담고 있습니다.아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.
