スワイプ検知

2019-06-05

リアクトネイティブ(React Native)プロジェクトでユーザが画面でどの方向でスワイプ(Swipe)したか検知するためreact-native-swipe-gesturesを使ってみましょう。

概要

リアクトネイティブ(React Native)プロジェクトを進めてる時ユーザのスワイプ(Swipe)の方向について別のアクションをする機能を追加することになりました。そして検索したらreact-native-swipe-gesturesと呼ばれるライブラリを発見して適用してみました。このブログでは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ソースはそんな長くないのでソースを見って自ら作っても面白いと思います。

参考

Buy me a coffeeBuy me a coffee
Posts