npm 包 rc-hammerjs 使用教程

阅读时长 6 分钟读完

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。在这个自定义手势中我们对 Swipedirection 参数进行了修改,使其可以支持所有的滑动方向。最后,我们将自定义手势 swipe 传给了 Hammerrecognizers 属性,来替换掉原有的手势。

总结

rc-hammerjs 是一个非常方便的手势识别组件库,它提供了手势识别组件,能够让我们快速地为我们的 React 应用添加手势交互功能。在使用 rc-hammerjs 时,我们可以通过传入不同的 props 来处理不同的手势类型,也可以通过自定义手势来满足我们的需求。本文介绍了 rc-hammerjs 的基本用法和一些重要特性,希望可以为你提供帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/rc-hammerjs