React Native 是一种跨平台的开发框架，可以使用 JavaScript 编写 Android 和 iOS 应用程序。在 React Native 应用中，手势处理是至关重要的一部分。在本文中，我们将介绍 React Native 中的手势处理技巧，并提供示例代码。
理解手势系统
React Native 的手势系统基于标准的 Gesture Responder System。它允许开发者创建响应式的手势处理器来处理用户输入。
手势处理器有几个阶段，包括开始、移动和结束，这些都能够触发相应的事件处理函数。这些事件处理函数可以使用 onResponder* 和 onTouch* 属性来设置，例如 onResponderGrant 、 onResponderMove 和 onResponderRelease 等。
不同的手势需要不同的处理器，比如拖动、捏合、旋转等。React Native 支持以下手势：
| 手势 | 描述 |
|---|---|
| 点击 | 用户点击某个元素 |
| 按下 | 用户按住某个元素 |
| 移动 | 用户在元素上滑动 |
| 离开 | 用户从元素上移开 |
| 取消 | 系统取消了手势响应 |
如何处理手势
下面我们以一个具体的例子来讲解如何处理手势。
假设我们有一个可以拖动的方形框，我们想让它支持拖动和释放手势。我们需要创建一个手势处理器，响应拖动开始、移动和结束事件，并且修改元素的位置。代码如下所示：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----------- ------------ - ---- ---------------
------ ------- ----- ------- ------- --------- -
----- - -
---- - -- -- -- - --
-
-------------------- -
------------------ - ---------------------
---------------------------- -- -- -----
------------------- ----- - --- -- -- -- -
----------------------- -- --
---- - -- --------------- - --- -- --------------- - -- --
----
--
---------------------- -- -- -
-- ------ ------- ------- -----
--
---
-
-------- -
----- - --- - - -----------
------ -
-----
-----------------------------------
------------------- - ---------- - - ----------- ----- -- - ----------- ----- - - ---
--
--
-
-
----- ------ - -------------------
---- -
------ ----
------- ----
---------------- -------
--
---在上面的例子中，我们创建了一个名为 DragBox 的组件，它是一个可拖拽的方形框。在 componentWillMount 方法中，我们创建了一个手势处理器 _panResponder，并使用 create 方法传入三个回调函数：
onMoveShouldSetPanResponder：响应拖动手势事件；onPanResponderMove：处理拖动事件，并执行状态更新；onPanResponderRelease：响应拖动手势结束事件，并做出响应。
注意到我们使用了 panHandlers 属性将手势处理器绑定到元素上，并设置了 style 属性来显示元素。
灵巧地处理手势
React Native 的手势处理还有很多高级技巧。下面让我们来看几个案例，来更好地了解如何处理手势。
旋转和捏合
你可能需要实现旋转或缩放手势，可以使用 onResponderTerminationRequest 方法来实现。下面是一个例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----------- ------------ - ---- ---------------
------ ------- ----- --------- ------- --------- -
----- - -
------ --
------ --
-
-------------------- -
------------------ - ---------------------
---------------------------- -- -- -----
------------------- ----- ------------- -- -
----- ------- - ------------------------
-- --------------- --- -- -
-- ------ --------
- ---- -- --------------- --- -- -
-- ------ ----- --- ----
----- --- -- - --------
----- -- - ------- - --------
----- -- - ------- - --------
----- ----- - -------------- --- - --- - --------
----- ----- - --------------- - ------ - ----
---------------
------
------
---
-
-
---
-
-------- -
----- - ------ ----- - - -----------
------ -
-----
-----------------------------------
------------------- - ---------- - - ------- ------------- -- - ----- - - ---
--
--
-
-
----- ------ - -------------------
---- -
------ ----
------- ----
---------------- -------
--
---在上面的例子中，我们创建了一个名为 RotateBox 的组件，它支持旋转和缩放手势。在 onPanResponderMove 方法中，我们处理了从两个触点中获取信息，并更新了 angle 和 scale 属性。
手势冲突
有时候，多个手势同时响应会导致手势冲突的问题。这时可以使用 onStartShouldSetPanResponder 和 onStartShouldSetPanResponderCapture 回调来决定哪个手势应该生效。下面是一个例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----------- ------------- ---- - ---- ---------------
------ ------- ----- ----------- ------- --------- -
----- - -
------- ---
-- --
-
-------------------- -
------------------ - ---------------------
---------------------------- -- -- -----
----------------------------- -- -- -----
------------------------------------ -- -- ------
------------------- ----- - -- -- -- -
----------------------- -- --
-- ----------- - ---
------- -----------
----
--
------------------ -- -- -
--------------- ------- ---------- ---
--
---
-
-------- -
----- - ------- - - - -----------
------ -
----- -------------------------
----- ------------------- - ----- - --- --
----- ----------------------------------- ------------------- - ----- - --- --
----- -----------------------------------
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
-------------- ---------
--------------- ---------
----------- ---------
--
---- -
------ ----
------- ----
---------------- -------
--------- -----------
--
----- -
---------- ---
--------- ---
--
---在上面的例子中，我们有两个元素 box，并使用 left 样式属性设置它们的位置。在使用 onStartShouldSetPanResponder 和 onStartShouldSetPanResponderCapture 方法中，我们决定让第二个元素响应拖动手势，而不是点击手势。我们也可以通过 status 属性来显示手势的状态。
总结
在本文中，我们介绍了 React Native 中的手势处理技巧，这些技巧包括有关手势系统的理解以及如何灵巧地处理手势。希望这些技巧能够对你的开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462eba9968c7c53b03f9a97
