rc-hammerjs 是一个基于 Hammer.js 封装的 React 组件库，它提供了手势识别组件，能够让我们快速地为我们的 React 应用添加手势交互功能。本文将介绍如何使用 rc-hammerjs 以及它的一些重要特性。
安装
npm 安装 rc-hammerjs:
--- ------- ----------- ------
或者使用 yarn:
---- --- -----------
使用
使用 rc-hammerjs 很简单，只需要在我们需要的组件里使用它提供的识别器即可：
------ ----- ---- --------
------ ------ ---- --------------
-------- --------- -
------ -
--------
------- --- ------------------
---------
--
-rc-hammerjs 的接口与 Hammer.js 类似，它支持以下手势：
Swipe: 左右或者上下滑动；Pan: 手指在屏幕上移动；Pinch: 双指缩放；Press: 长按屏幕；Rotate: 旋转屏幕。
每个识别器都可以传入 onPan, onPinch, onSwipe 等 props，来处理相应的手势事件。
以下是一个完整的示例：
------ ----- ---- --------
------ ------ ---- --------------
-------- --------- -
-------- ------------------ -
-----------------------------
-
-------- ---------------- -
--------------- ---------------- -- ------------------
-
-------- ------------------ -
------------------- -----------------
-
------ -
------- --------------------- ----------------- ----------------------
------- --- ------------------
---------
--
-自定义手势
有时候，Hammer.js 提供的默认手势并不能满足我们的需求，这时候我们需要自定义手势。rc-hammerjs 提供了 defineGesture 方法，可以让我们自定义一个手势：
------ ----- ---- --------
------ ------ ---- --------------
-------- --------- -
-------- ------------------- -
---------------------- --------------------
-
-------- --------------- -
------ -
----- ---------
------- -----
------------ -------
-------- -
---------- --
--
-------------- --------
--------------- --------
-------- -
----------- -
--------------------
--
--
--
-
------------------------------------
------ -
------- -------
------- --- --------------------
---------
--
-在以上示例中，我们自定义了一个 rotate 手势，并通过 Hammer.defineGesture 方法注册该手势。customGesture 方法则需要返回我们自定义手势的配置项。在此示例中，我们让这个手势与 pan 互相识别，但是 rotate 要优先于 pan 执行，即先不识别 pan，再往后传递事件。emitter 对象里面的 emit 方法则用来处理手势事件，这里我们只是简单地输出了旋转的速度。
重载原有手势
有时候，Hammer.js 提供的手势不够灵活，我们需要对已有的手势进行重载。我们可以从 rc-hammerjs 中导出原有手势并进行修改，然后再将其导入使用：
------ ----- ---- --------
------ ------ ---- --------------
----- - ----- - - -------
-------- --------- -
-------- ------------------ -
-----------------------------
-
----- ----------- - -
---------
-------- -
-----------------
---------- ---------------------
--
--
------ -
------- -------------- ------ ----------- -- ----------------------
------- --- ------------------
---------
--
-在以上示例中，我们将 Swipe 对象解构出来，并通过继承方式派生出了一个自定义手势 customSwipe。在这个自定义手势中我们对 Swipe 的 direction 参数进行了修改，使其可以支持所有的滑动方向。最后，我们将自定义手势 swipe 传给了 Hammer 的 recognizers 属性，来替换掉原有的手势。
总结
rc-hammerjs 是一个非常方便的手势识别组件库，它提供了手势识别组件，能够让我们快速地为我们的 React 应用添加手势交互功能。在使用 rc-hammerjs 时，我们可以通过传入不同的 props 来处理不同的手势类型，也可以通过自定义手势来满足我们的需求。本文介绍了 rc-hammerjs 的基本用法和一些重要特性，希望可以为你提供帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/rc-hammerjs