前言
在 React Native 开发中，手势交互是非常常见也非常重要的。虽然 RN 自带的手势交互 API 也很不错，但是部分情况下需要更加自定义化的操作，这时候就需要一些开源的第三方插件来完成我们的需求。本文主要讲解一个 npm 包：react-native-gesture-wrapper 的使用教程及其相关技术知识。
介绍
react-native-gesture-wrapper 是一款专门为 React Native 开发者打造的手势交互库，它基于 PanResponder 库实现，具有以下特点：
- 支持在一个组件内处理多个手势操作；
- 支持处理不同方向和类型的手势操作；
- 支持不同触发条件的手势操作。
下面我们就来深入探讨一下如何使用它。
安装
在项目目录下打开终端或命令行，执行以下命令即可安装：
npm install react-native-gesture-wrapper --save
使用
在需要使用手势操作的组件中引入 react-native-gesture-wrapper，然后在组件的 render 函数中加入 GestureWrapper 组件。GestureWrapper 组件的子组件即为需要触发手势操作的组件，例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ -------------- ---- -------------------------------
----- ----------- ------- --------- -
-------- -
------ -
----------------
------
----------------------------
-------
-----------------
--
-
-在子组件中添加对应的手势操作，例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ -------------- ---- -------------------------------
----- ----------- ------- --------- -
--------------- - -- -- -
------------------ -------
--
---------------- - -- -- -
------------------ --------
--
-------- -
------ -
--------------- ---------------------------------- -------------------------------------
------
----------------------------
-------
-----------------
--
-
-上面代码中，我们在 GestureWrapper 组件中添加了 onSwipeLeft 和 onSwipeRight 属性并分别绑定了 handleSwipeLeft 和 handleSwipeRight 两个自定义函数。这两个函数在手势操作完成后会立即执行并输出对应的信息到控制台中。
API
GestureWrapper 支持多种类型和方向的手势操作，在这里仅列出常用的一些属性及其使用方法，更加详细的 API 可以参考官方文档。
onSwipeLeft
当用户从右向左滑动时触发。
<GestureWrapper onSwipeLeft={handlerFunction}>
{childComponent}
</GestureWrapper>onSwipeRight
当用户从左向右滑动时触发。
<GestureWrapper onSwipeRight={handlerFunction}>
{childComponent}
</GestureWrapper>onSwipeUp
当用户从下向上滑动时触发。
<GestureWrapper onSwipeUp={handlerFunction}>
{childComponent}
</GestureWrapper>onSwipeDown
当用户从上向下滑动时触发。
<GestureWrapper onSwipeDown={handlerFunction}>
{childComponent}
</GestureWrapper>onPanResponderGrant
响应手势操作开始的事件。
<GestureWrapper onPanResponderGrant={handlerFunction}>
{childComponent}
</GestureWrapper>onPanResponderMove
响应手势操作进行时的事件。
<GestureWrapper onPanResponderMove={handlerFunction}>
{childComponent}
</GestureWrapper>onPanResponderRelease
响应手势操作结束的事件。
<GestureWrapper onPanResponderRelease={handlerFunction}>
{childComponent}
</GestureWrapper>示例代码
以下是一个基于 react-native-gesture-wrapper 实现的一个滑动删除列表的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- ----------- ---------------- - ---- ---------------
------ -------------- ---- -------------------------------
----- --------- ------- --------- -
------------------ -
-------------
---------- - -
------ ------ --- ----- --- ----- --- ----- --- ----- ---
--
-
--------------- - ----- -- -
----- -------- - ----------------------
---------------------- ---
--------------- ------ -------- ---
--
-------- -
------ -
----- -------------------------
---------------------------- ------ -- -
------ -
--------------- ----------- --------------- -- -----------------------------
----------------- --------------------
-------------------
-------------------
-----------------
--
---
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
---------------- ------
--
----- -
------- ---
--------------- ---------
------------ ---
---------------- ------
-
---
------ ------- ----------上面代码中，我们在父组件 SwipeList 中循环渲染了一个包含多个子项的列表，并为每个子项添加了 onSwipeLeft 属性，用于响应滑动删除的操作；当用户从右向左滑动某个子项时，执行 handleSwipeLeft 函数删除该项，并更新状态重新渲染列表。
总结
本文主要讲解了 npm 包 react-native-gesture-wrapper 的使用教程及其相关知识点，包括如何实现普通手势操作和如何应用在一个实际示例中。希望读者在阅读本文后能够更加简单快捷地使用该库，并在实际开发中得到更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cd881e8991b448da754