RNGestureHandlerModule pod 规范介绍

概述

RNGestureHandlerModule 是 React Native 中手势识别库，能够在 iOS 和 Android 平台提供一致的手势识别操作。通过该库，你可以快速、简单地绑定、识别和处理用户的手势操作。在 RN 0.60 版本及以上，RNGestureHandlerModule 库已经成为 React Native 默认的手势库，目前最新版本为 2.1.0。

安装

在你的 React Native 项目中运行以下命令：

yarn add react-native-gesture-handler

或者

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

配置

随着 React Native 对 iOS 和 Android 原生端的集成不断优化，RNGestureHandler 需要在 RN 0.60.0 及以上的版本中进行手动配置。

在 iOS 平台，运行以下命令：

cd ios && pod install

在 Android 平台上，需在 android/app/src/main/java/[...]/MainApplication.java 文件中完成以下操作：

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

    public class MainApplication extends Application implements ReactApplication {
      private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        @Override
        protected ReactActivityDelegate createReactActivityDelegate() {
          return new ReactActivityDelegate(MainApplication.this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainApplication.this);
            }
          };
        }
        ...
      };
      ...
    }

使用

在你的 React 组件中导入 RNGestureHandlerModule：

import {TouchableOpacity, ScrollView} from 'react-native';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

可将组件封装为 GestureHandlerRootView ，用以提供整个组件范围的手势操作识别功能：

return (
  <GestureHandlerRootView style={{flex: 1}}>
    <ScrollView>
      <TouchableOpacity onPress={handlePress}>
        ...
      </TouchableOpacity>
    </ScrollView>
  </GestureHandlerRootView>
);

使用 RNGestureHandlerModule 模块来识别手势操作：

import {PanGestureHandler} from 'react-native-gesture-handler';

<PanGestureHandler onGestureEvent={handleDrag}>
  <Box style={styles.box} />
</PanGestureHandler>

以上只是 RNGestureHandlerModule 库的一部分功能示例，其他诸如滑动手势、缩放手势、长按手势还有更高级的 Node-based Gesture Handlers （Node 节点手势处理器）等功能不一一赘述，可在官网文档里查看更多详细信息。

关于作者

• 作者：@coder-python
• 欢迎大家访问我的博客：coder-python.cn

参考

• react-native-gesture-handler 文档
• github 仓库