react-native-gesture-handler 手势的使用

姚*鸿的博客2023-08-25 14:10

要在React Native项目中使用react-native-gesture-handler，可以按照以下步骤进行设置：

1、首先，在你的React Native项目中安装react-native-gesture-handler。可以使用npm或者yarn命令来安装：

javascript 复制代码

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文件中添加以下导入语句：

java 复制代码

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

然后，修改getMainComponentName方法如下：

java 复制代码

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

对于iOS平台，如果您使用的是CocoaPods进行包管理，可以通过在项目的Podfile中添加以下代码来简化这个过程:

objectivec 复制代码

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

然后，执行 pod install。

6、接下来，你可以在你的React Native组件中使用react-native-gesture-handler提供的手势组件了。例如，你可以使用TapGestureHandler和PanGestureHandler来处理点击和拖动手势。

javascript 复制代码

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的基本步骤。你可以根据文档进一步了解各种手势组件和属性的使用方式。