简介
react-native-event-handler 是一个用于在 React Native 应用中处理各种事件的 npm 包。它可以捕捉用户行为和其他事件，并提供一种方便的方式去处理这些事件。
在本教程中，我们将会详细讲解如何使用该 npm 包，并提供示例代码以便读者更好地理解。
安装 react-native-event-handler
首先我们需要在你的项目中安装 react-native-event-handler ：
npm install react-native-event-handler --save
在安装完成后，我们需要在需要使用 react-native-event-handler 的文件中导入它：
import {
PanGestureHandler,
TapGestureHandler,
RotationGestureHandler,
PinchGestureHandler,
Swipeable
} from 'react-native-gesture-handler';在上面的代码中，我们导入了 react-native-event-handler 中支持的一些手势。
使用 react-native-event-handler
在上述代码中，我们已经导入了 PanGestureHandler、TapGestureHandler、RotationGestureHandler、PinchGestureHandler 和 Swipeable 这些组件。接下来我们会详细讲解如何使用这些组件。
PanGestureHandler
PanGestureHandler 可以用来处理用户的拖动事件，比如：拖动一个视图，改变一个视图的位置等。
下面是一个具体的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----- ----------- ---- ---------------
------ -------- ---- --------------------------
------ -
------------------
--------------------
-----------------------
- ---- -------------------------------
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
---- -
------- ----
------ ----
---------------- ---------
--
---
----- ---------- ------- --------------- -
------------------ -
-------------
--------------- - --- ------------------
--------------- - --- ------------------
------------------- - ----------------
-
------------ -
------------- ----------------
------------- ----------------
--
--
---
-
-------- -
------ -
----- -------------------------
------------------ -------------------------------------
--------------
--------
-----------
-
---------- -
------------ -----------------
------------ -----------------
--
--
--
--
--------------------
-------
--
-
-
------ ------- -----------在上例中，我们创建了一个 PanGestureHandler，并且在 this.onGestureEvent 中定义了对用户拖动事件的处理函数。我们将该函数传递给 onGestureEvent 属性，这样 PanGestureHandler 就会自动监听用户拖动事件并执行处理函数。
TapGestureHandler
TapGestureHandler 可以用来处理用户的点击事件。
下面是一个具体的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----- ----------- ---- ---------------
------ -------- ---- --------------------------
------ ------------------- ---- -------------------------------
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
---- -
------- ----
------ ----
---------------- ---------
--------------- ---------
----------- ---------
--
---
----- ---------- ------- --------------- -
------------------ -
-------------
---------- - --- ------------------
---------------- - ----------------------------- --- ---------------
-
-------- -
------ -
----- -------------------------
------------------ ----------------------------------------
--------------
--------
-----------
-
---------- -------- -------------
--
---
--------- ---------
----------------
--------------------
-------
--
-
-
------ ------- -----------在上例中，我们创建了一个 TapGestureHandler，并且在 this.onSingleTap 中定义了对用户点击事件的处理函数。我们将该函数传递给 onHandlerStateChange 属性，这样 TapGestureHandler 就会自动监听用户点击事件并执行处理函数。
RotationGestureHandler
RotationGestureHandler 可以用来处理用户的旋转事件。
下面是一个具体的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----- ----------- ---- ---------------
------ -------- ---- --------------------------
------ ------------------------ ---- -------------------------------
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
---- -
------- ----
------ ----
---------------- ---------
--------------- ---------
----------- ---------
--
---
----- --------------- ------- --------------- -
------------------ -
-------------
----------- - --- ------------------
------------------- - ----------------------------- ---------- ----------------
-
-------- -
------ -
----- -------------------------
----------------------- ------------------------------------ -----------------------
--------------
--------
-----------
-
---------- --------- --------------
--
---
------------ ---------
----------------
-------------------------
-------
--
-
-
------ ------- ----------------在上例中，我们创建了一个 RotationGestureHandler，并且在 this.onGestureEvent 中定义了对用户旋转事件的处理函数。我们将该函数传递给 onGestureEvent 属性，这样 RotationGestureHandler 就会自动监听用户旋转事件并执行处理函数。
PinchGestureHandler
PinchGestureHandler 可以用来处理用户的缩放事件。
下面是一个具体的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----- ----------- ---- ---------------
------ -------- ---- --------------------------
------ --------------------- ---- -------------------------------
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
---- -
------- ----
------ ----
---------------- ---------
--------------- ---------
----------- ---------
--
---
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - --- ------------------
------------------- - ----------------------------- ------- -------------- -
---------------- -----
---
-
-------- -
------ -
----- -------------------------
-------------------- ------------------------------------ -------------------
--------------
--------
-----------
-
---------- -------- -------------
--
---
----------- ---------
----------------
----------------------
-------
--
-
-
------ ------- -------------在上例中，我们创建了一个 PinchGestureHandler，并且在 this.onGestureEvent 中定义了对用户缩放事件的处理函数。我们将该函数传递给 onGestureEvent 属性，这样 PinchGestureHandler 就会自动监听用户缩放事件并执行处理函数。
Swipeable
Swipeable 可以用来处理用户的滑动事件，比如：用户在滑动列表中的某一项时，可以将其删除。
下面是一个具体的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----- ----------- ---- ---------------
------ -------- ---- --------------------------
------ ------------ ---------- ---- -------------------------------
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
---- -
------- ----
---------------- ---------
--------------- ---------
------------ ---
--
------------- -
---------------- ------
--------------- ---------
------------ ---
------------- ---
--
----------------- -
------ --------
--
---
----- ---------------- ------- --------------- -
------------------ -
-------------
------------------ - ------------------
-
------------------ - ---------- ------ -- -
----- ----- - -------------------
----------- --- --- ---- -----
------------ ----- -- -- ---
---
------ -
----------- --------------------------- ---------------------
--------------
--------
------------------------
-
---------- ------------- --------
--
---
------
----------------
-------------
--
--
--------- - ----- -- -
------------------ - ----
--
-------- -
------ -
----- -------------------------
----------
--------------------
---------------------------------------------
----- -------------------
----------- ----------
-------
------------
-------
--
-
----- - -- -- -
-- -------------------- -
---------------------------
-
--
-
------ ------- -----------------在上例中，我们创建了一个 Swipeable，并且在 this.renderRightActions 中定义了对用户滑动事件的处理方式。我们将该函数传递给 renderRightActions 属性，这样 Swipeable 就会自动监听用户滑动事件并执行处理函数。
总结
在本教程中，我们详细讲解了如何使用 react-native-event-handler 来处理各种事件。通过本教程，读者能够了解到该 npm 包的使用方法，掌握如何在 React Native 应用中捕捉和处理各种事件。希望本教程可以对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663781e8991b448e22be