スワイプ検知

概要

リアクトネイティブ(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

使い方

リアクトネイティブ(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({
    ...
  });
  ...
};

完了

これでリアクトネイティブ(React Native)でユーザのスワイプ(Swipe)を検知する方法についてみてみました。簡単な機能もどんどんコーディングをしなくてコピペーしてる自分をみつけました。。。react-native-swipe-gesturesソースはそんな長くないのでソースを見って自ら作っても面白いと思います。