React-native-gesture-handler ジェスチャの使用

React Native プロジェクトで React-native-gesture-handler を使用するには、次の手順に従ってセットアップできます。

1. まず、React Native プロジェクトに React-native-gesture-handler をインストールします。npm または Yarn コマンドを使用してインストールできます。

npm install react-native-gesture-handler

または

yarn add react-native-gesture-handler

2. インストールが完了したら、react-native-gesture-handler をネイティブコードにリンクする必要があります。次のコマンドを実行します。

npx react-native link react-native-gesture-handler

3. 次に、GestureHandler ライブラリをプロジェクトにインポートします。エントリポイントファイル (通常は App.js または Index.js) に以下を追加します。

import 'react-native-gesture-handler';

4. 次に、ネイティブコードで追加の構成を実行する必要があります。正確な構成は、使用しているプラットフォームによって異なります。

Android プラットフォームの場合は、android/app/src/main/java/com/<your-app>/MainApplication.java次のインポートステートメントをファイルに追加します。

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

次に、getMainComponentName次のように変更します。

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
  return new ReactActivityDelegate(this, getMainComponentName()) {
  @Override
  protected ReactRootView createRootView() {
    return new RNGestureHandlerEnabledRootView(MainApplication.this);
  }
  };
}

iOS プラットフォームの場合、パッケージ管理に CocoaPods を使用している場合は、プロジェクトの Podfile に次のコードを追加することでプロセスを簡素化できます。

pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'

次に、ポッドのインストールを実行します。

6. 次に、React Native コンポーネントで、react-native-gesture-handler によって提供されるジェスチャコンポーネントを使用できます。たとえば、とを使用して、TapGestureHandlerクリックPanGestureHandlerアンドドラッグジェスチャを処理できます。

import { useState } from 'react'
import { Text, View } from 'react-native'
import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";

export default function registerScreens() {
    const [a, setA] = useState("1"),
    [b, setB] = useState("2"),
    [c, setC] = useState("3");

  const gesture = Gesture.Pan()
    .onBegin(() => {
        setA("A");
    })
    .onUpdate(({ translationX, translationY }) => {
        setB("B");
    })
    .onEnd(({ velocityX, velocityY }) => {
        setC("C");
    });

  return (
    <GestureHandlerRootView>
        <GestureDetector gesture={gesture}>
            <View>
                <Text>{ a }</Text>
                <Text>{ b }</Text>
                <Text>{ c }</Text>
            </View>
        </GestureDetector>
    </GestureHandlerRootView>
    )
}

上記は、react-native-gesture-handler を使用するための基本的な手順です。ドキュメントに従って、さまざまなジェスチャコンポーネントとプロパティの使用方法について詳しく学ぶことができます。

React-native-gesture-handler ジェスチャの使用

おすすめ