React 是一个流行的前端框架，Hammer.js 是一个专业的手势库，react-hammerjs 将两者结合起来，提供了丰富的手势支持。本文将介绍如何使用 npm 包 react-hammerjs。
安装
使用 npm 进行安装：
npm install react-hammerjs --save
使用
引入 Hammer.js 和 react-hammerjs：
import Hammer from 'hammerjs';
import { HammerGestureHandler, HammerInput } from 'react-hammerjs';定义一个手势处理函数：
const handlePan = (e: HammerInput) => {
// 处理手势事件，e.deltaX 和 e.deltaY 表示手势位移
};在组件中使用 Gesture Handler：
<HammerGestureHandler onPan={handlePan}>
<div>支持手势操作的内容</div>
</HammerGestureHandler>属性
Gesture Handler 组件支持以下属性：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| onGestureEvent | GestureEventHandlers | 手势事件处理器 | |
| onHandlerState | HammerStateHandlers | 处理器状态改变的事件处理器 | |
| onBecameActive | (event: PanGestureEvent) => void | 执行成功之后的回调函数 | |
| shouldCancelWhenOutside | boolean | false | 是否在组件之外也响应手势 |
示例
下面是一个示例，演示如何使用 react-hammerjs 进行拖拽操作：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
------ - --------------------- ----------- - ---- -----------------
----- ---- - -- -- - -- -- -
----- ----- - -
--------- -----------
------ ---
------- ---
------------- ---
---------------- ------
---------- ------------------ ---------
--
------ ---- ------------- ---
--
----- ------------- ------- --------------- -
--------- - --- ------------ -- -
---------------
-- ------------ - ---------
-- ------------ - ---------
---
--
----- - - -- -- -- - --
-------- -
------ -
--------------------- -----------------------
----- ---------------- ---------------- --
-----------------------
--
-
-总结
react-hammerjs 提供了丰富的手势支持，可以方便地处理用户手势操作。本文介绍了 react-hammerjs 的基本使用方法，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb42cb5cbfe1ea0611240