rc-hammerjs 是一个基于 Hammer.js 封装的 React 组件库,它提供了手势识别组件,能够让我们快速地为我们的 React 应用添加手势交互功能。本文将介绍如何使用 rc-hammerjs 以及它的一些重要特性。
安装
npm 安装 rc-hammerjs:
npm install rc-hammerjs --save
或者使用 yarn:
yarn add rc-hammerjs
使用
使用 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