Expo PR

React Native Gesture Handlerの使い方と例

  /
記事内に商品プロモーションを含む場合があります

今回はReact Native Gesture Handlerの使い方と例を紹介します。

ネイティブアプリを作成しているときに、タッチ系の操作の実装に困ったのでインストールから、実装まで残します。

対象読者

  • React Native Gesture Handlerを使って
    ジェスチャー実装したい
  • 細かい使い方を知りたい

（本記事はiOS向けのため、Androidはごめんなさい）

React Native Gesture Handlerの機能

React Native Gesture Handlerとは

React Native Gesture Handlerとは、React Nativeでジェスチャーを実装できるライブラリです。

React Nativeに組み込まれているGesture Responder Systemというタッチシステムを置き換えることを目的として作られました。

React Native Gesture Handlerのメリットは、React NativeのGesture Responder Systemのパフォーマンス上の制限に対処することと、ジェスチャーを扱うことができるビルトインのネイティブコンポーネントをよりコントロールできる点です。

パフォーマンスの問題点については、こちらを参照するとわかりやすいです。

React Native Gesture Handlerで提供されている機能

機能1. ピンチ、回転、パンなどのタッチジェスチャー

ピンチ、回転、パン（その他のいくつかのジェスチャーを含む）を認識ができます。

iOSやAndroidなどのプラットフォームのネイティブなタッチ処理システムを使用する際に利用できます。

機能2. ジェスチャーハンドラの定義

React Native Gesture Handlerでは、
ジェスチャーハンドラ間の関係を定義することができます。

例えば、ScrollViewにパンハンドラがある場合、パンが認識されないことがわかるまでScrollViewを待たせることができます。

機能3. スクロール可能なコンポーネントのハンドラを遅らせる

ネイティブ スレッドで実行され、プラットフォームのデフォルトの動作に従うタッチ可能なコンポーネントを使用するためのメカニズムを遅らせることができます。

scrollable コンポーネント内に touchable がある場合、押下された状態になるのを少し遅らせて、投げたときにハイライトされないようにすることができます。

機能4. アニメーション

ネイティブドライバーにより、スムーズなジェスチャーインタラクションの実装が可能です。

React Native Gesture Handlerのインストール

方法1. React Native Gesture HandlerをExpoで使う

Expoで利用するには、下記のコマンドを打ち込むだけです。

expo install react-native-gesture-handler

注意点として、Expo SDKには各SDKリリース時に利用可能な最新バージョンのreact-native-gesture-handlerが組み込まれています。

Expoでは、最新の機能が利用可能になってもすぐには対応できない場合があるので注意しましょう。

方法2. React Native Gesture Handlerをライブラリだけインストール（Expoなし）

Expoを使わない方法でインストールするのであれば、ジェスチャーを処理するためのネイティブサポートを使用しているため、標準までの拡張インストールが必要です。

もし、新しいプロジェクトを始めるのであれば、expo-cliで初期化して、ベアテンプレートを使用するとよいでしょう。

React Native Gesture HandlerのバージョンReact Nativeのバージョン
1.4.0以上0.60.0以上
1.1.0以上0.57.2以上
1.1.0以下0.50.0以上
React Native Gesture HandlerとReact Nativeのバージョン対応表

方法2のインストール手順

まず、ライブラリのインストールを行います。

yarnとnpmで違うので注意してください。

yarn add react-native-gesture-handler

もしくは

npm install --save react-native-gesture-handler

次に、リンクさせます。

react-native link react-native-gesture-handler

次に、pod installを行います（iOSの場合）

cd ios && pod install

最後に利用する場所で、インポートをしましょう

import 'react-native-gesture-handler';

React Native Gesture Handlerの使い方

ジェスチャーハンドラーで利用できるジェスターの例

利用できるジェスチャー

・PanGestureHandler

・TapGestureHandler

・LongPressGestureHandler

・RotationGestureHandler

・FlingGestureHandler

・PinchGestureHandler

・ForceTouchGestureHandler

React Native Gesture Handlerの基本的な使い方

ハンドラコンポーネントはネストすることができます。

最も内側のハンドラがネイティブなビューコンポーネントをレンダリングすることが推奨されます。

useNativeDriver フラグを使用する場合は、いくつかの制限があります。

class Multitap extends Component {
  render() {
    return (
      <LongPressGestureHandler
        onHandlerStateChange={this._onLongpress}
        minDurationMs={800}>
        <TapGestureHandler
          onHandlerStateChange={this._onSingleTap}
          waitFor={this.doubleTapRef}>
          <TapGestureHandler
            ref={this.doubleTapRef}
            onHandlerStateChange={this._onDoubleTap}
            numberOfTaps={2}>
            <View style={styles.box} />
          </TapGestureHandler>
        </TapGestureHandler>
      </LongPressGestureHandler>
    );
  }
}

利用できるコンポーネント

ジェスチャーハンドラライブラリは、NativeViewGestureHandlerでラップされた、React Nativeで通常利用可能なコンポーネントのセットを利用できます。

利用できるコンポーネント

・ScrollView

・FlatList

・Switch

・TextInput

・DrawerLayoutAndroid (Androidのみ)

ScrollViewにネストされた他のハンドラやボタンを使用したい場合は、waitForプロパティを使用して、ハンドラとScrollViewの間のインタラクションを定義しましょう。

useNativeDriverとの併用

ハンドラーの間に『Animated.View』コンポーネントを配置することをお勧めします。

その理由は、ハンドラはネイティブ ビューをインスタンス化せず、代わりに子ビューにフックアップするため、Animated.event を使用して 2 つのジェスチャ ハンドラを直接ネストすることは現在サポートされていないためです。

変更前（useNativeDriver）

const PanAndRotate = () => (
  <PanGestureHandler onGestureEvent={Animated.event({ ... }, { useNativeDriver: true })}>
    <RotationGestureHandler onGestureEvent={Animated.event({ ... }, { useNativeDriver: true })}>
      <Animated.View style={animatedStyles}/>
    </RotationGestureHandler>
  </PanGestureHandler>
);

変更後（useNativeDriver）

const PanAndRotate = () => (
  <PanGestureHandler onGestureEvent={Animated.event({ ... }, { useNativeDriver: true })}>
    <Animated.View>
      <RotationGestureHandler onGestureEvent={Animated.event({ ... }, { useNativeDriver: true })}>
        <Animated.View style={animatedStyles}/>
      </RotationGestureHandler>
    </Animated.View>
  </PanGestureHandler>
);

まとめ

今回はReact Native Gesture Handlerの使い方についてまとめました。

次回以降は、具体的なジェスチャーについてまとめていきます。

こちらの記事では、React Nativeの将来性について記載しているので、合わせて見てみてください。

react_native_オワコン_理由_flutter_swiftui_比較
【2024最新】ReactNativeはオワコン？→価値あり（Swiftと比較) 本記事ではReact Nativeはオワコンなのか？について解説していきます 「React Nativeはオワコンだ」という意見...

RELATED POST