简介
react-with-gesture 是一个 React 库，可用于轻松创建手势控制的 Web 应用程序。无需编写大量代码，你就可以构建出具有相应细节和动画效果的应用程序。
react-with-gesture 可以用于实现各种不同的手势操作，例如：拖动、缩放、旋转、滑动等。它带有简单易用的接口，只需要几行代码就可以轻松完成所有功能。
安装
首先，在终端中导航到你的项目目录。然后运行以下命令，以安装 react-with-gesture :
--- ------- ------------------ ------
使用
为了用于 react-with-gesture，必须先将其导入到你的项目中。然后，你可以简单地包装你的 component ，使其具有手势处理属性。下面是一个 DraggableBox 组件示例：
------ ----- ---- --------
------ - ----------- -------- - ---- ---------------------
----- ------------ - -- -- -
----- ------ - ------ ---- -- - -------------
----- - -- - - - ------
------ -
------------- ----------- -------- -- - ---
---- ---
---------------
--
--
------ ------- -------------在上面的示例中，我们使用了 useGesture 以及 animated 函数从 react-with-gesture 中导入的方法来绑定 component 和手势处理。我们还定义了一个 DraggableBox 组建，它具有一个能够被拖动的的 div 元素。
解释
上述示例中，我们使用到了 useGesture 和 animated 函数。其中 useGesture 用于给 component 绑定手势处理属性， animated 函数用于定义一个 可以更新并反映手势操作的 div 元素。
我们在 useState 中定义了一个 down 变量，该变量表示了鼠标当前是否处于按下状态。通过判断 down 的值，可以实现拖动行为的启用和关闭。
我们通过 bind() 方法将返回的 down 对象与 div 元素进行绑定， 这样 div 元素就可以和手势处理相关联起来了。我们还可以自定义展示效果和行为。在上面的示例中，我们在 div 元素上定义了一个 style 属性，用于控制元素的位置，实现了拖动的效果。
教程
在实际项目中，你会发现 react-with-gesture 的使用非常简单，但是在各种场景下进行手势操作时，你还是需要采用不同的方式处理。下面，我们将从拖动、按下、滑动、缩放、旋转等五个方面，对其使用进行介绍。
拖动
要实现拖动效果，你可以通过官方文档中 useSpring 方法创建动画效果. 也可以使用 useDrag 方法来完成。下面是一个示例：
------ ----- ---- --------
------ - ---------- ------- - ---- ---------------------
----- ------------ - -- -- -
----- -- -- - -- ---- - ------------ -- -- -- -- -- - ----
----- ---- - ---------- ----- --------- ---- --- -- -- -
----- -- ---- - -- - -- -- ---- - -- - - ---
---
------ ---- ----------- -------- -- - -- ---
--
------ ------- -------------在上面的代码中，我们使用 useSpring 方法，定义了一个带有 x 和 y 的对象，该对象表示了挂载的 div 元素的位置。在 useDrag 方法中，我们用 bind() 方法将 down 对象与 div 元素进行了绑定，并返回一个 movement 数组，这个数组保存鼠标移动的距离，用来更新挂载的对象的位置。这样，鼠标在按下时，挂载的元素就会跟随着鼠标移动。
按下
react-with-gesture 也支持单击、双击等多种点击事件。实现方式与上述方式一样，在 useClick 方法中定义并使用即可，这里不再赘述。需要注意的是，如果你想要为单击动作添加一定的延迟，以允许用户更改单击方向，请使用 useTap 方法去实现。
滑动
要实现滑动效果，你可以使用 useGesture 方法监听 onWheel 事件。下面是一个示例：
------ ----- ---- -------- ------ - ---------- - ---- --------------------- ----- --------- - -- -- - ----- -- - -- ---- - ------------ -- -- -- - ---- ----- ---- - ------------ -------- -- ------ -- -- -- -- ----- -- - - - -- --- ------ ---- ----------- -------- - -- --- -- ------ ------- ----------
在上述示例代码中，我们在组件中监听了 onWheel 事件，并通过 delta 对象获取到了鼠标滚动的距离。最终我们通过更新 y 值来实现滑动效果。
缩放
react-with-gesture 也可以用于实现缩放效果。类似地，在 useGesture 方法中使用 onPinch 属性来实现即可。下面是一个示例：
------ ------ - -------- - ---- --------
------ - ---------- - ---- ---------------------
----- ------- - -- -- -
----- ---- - ------------
----- - ----- --------- - - ------------
-------- -- ------- --- -- -- -- -
-----
-----
--
---
----- - - - -- -
--- ------- - ------- - - - ----
-- -------- - ---- -
------- - ----
- ---- -- -------- - -- -
------- - --
-
-----------------
--
----- - - - -- -
---------------
--
------ ---- ----------- -------- ------------- ----- ------- -- ---
--
------ ------- --------在上述示例代码中，我们使用 useState 方法来定义了一个 zoom 值，并使用 useGesture 方法监听 Pinch 事件。在 onPinch 回调函数中，我们通过 offset 属性获取到了双指缩放的 distance 和 angle ，使用 s() 方法来更新缩放值 zoom 。使用 r() 方法更新缩放的角度。
旋转
与上述方式类似，旋转是将鼠标绕元素旋转的效果。但是，和上述的几种方式不一样，旋转使用的事件是 onRotate 。下面是一个示例：
------ ------ - -------- - ---- --------
------ - ---------- - ---- ---------------------
----- --------- - -- -- -
----- ------ - ------------
----- - ----- --------- - - ------------
--------- -- ------ --- -- -- -
-----
--
---
----- - - - -- -
--- ------- - --------- - --
-- -------- - ---- -
------- - --
- ---- -- -------- - -- -
------- - ----
-
-------------------
--
------ ---- ----------- -------- ------------- ---------- ------------------------- -- ---
--
------ ------- ----------在上述示例代码中，我们使用 useState 方法来定义了一个 rotate 变量，并使用 useGesture 方法监听 onRotate 事件。在 onRotote 回调函数中，我们通过 delta 属性获取到了旋转角和 spin 的放大倍数，这里我们使用 r() 来更新旋转值 rotate 。
总结
react-with-gesture 能够帮助我们轻松实现多种手势操作，并且能够扩展传统的 React 事件处理功能。在实际项目中，我们可以根据实际情况综合使用前面讲到的多种方式，以达到各种场景下的应用需求。
希望通过本文的介绍和示例能够帮助读者更好地掌握 react-with-gesture 的使用方法，从而更好地应用于实际项目中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/161309