React-Native 手势处理详解1

本文尝试介绍 RN 中触摸事件处理。

前言：

react-native封装了一系列的组件例如来提供触摸事件的反馈，另外Button、Text等组件也提供了简单的点击方法来给组件快速添加触摸事件。

TouchableHighlight,

TouchableNativeFeedback,

TouchableOpacity,

ToucnableWithoutFeedback,

这四个触摸组件基本能够完成大多数的触摸事件，有四个回调方法

onPressIn:点击开始；

onpressOut：点击结束或者离开；

onPress：单击事件回调，用得比较多的方法就是这个了；

onLongPress:长按事件回调；

如果我们希望做复杂的效果，改怎么办呢？答案是panResopner。

panResopner：

处理更为复杂的触摸操作，例如多点触摸手势。

正常的响应事件流程应该是这样的:

是否接受相应->响应触摸事件->释放触摸事件

与流程相对应的方法是:

1.onStartShouldSetPanResponder：(evt) => true:用户开始触摸屏幕的时候，是否愿意成为响应者；默认返回false，无法响应，当返回true的时候则可以进行之后的事件传递。

2.onMoveShouldSetPanResponder：(evt) => true:在每一个触摸点开始移动的时候，再询问一次是否响应触摸交互；

如果View返回true，并开始尝试成为响应者，那么会触发下列事件之一:

3.onPanResponderGrant: (evt) => {}:开始手势操作，也可以说按下去。给用户一些视觉反馈，让他们知道发生了什么事情！（如：可以修改颜色）

4.onPanResponderMove：(evt,gestureState)=>{}最近一次的移动距离.如:(获取x轴y轴方向的移动距离 gestureState.dx,gestureState.dy)

5.onPanResponderRelease：用户放开了所有的触摸点，且此时视图已经成为了响应者。

6.onPanResponderTerminationRequest请求的，也可能是由操作系统强制夺权（比如iOS上的控制中心或是通知中心）。

触摸事件参数

onPanResponderMove: (event, gestureState) => {}

从上面的函数就可以看到，触摸事件中，基本都包含这两个参数：

一个nativeEvent对象有如下的字段：

1.changedTouches - 在上一次事件之后，所有发生变化的触摸事件的数组集合（即上一次事件后，所有移动过的触摸点）

2.identifier - 触摸点的ID

3.locationX - 触摸点相对于父元素的横坐标

4.locationY - 触摸点相对于父元素的纵坐标

5.pageX - 触摸点相对于根元素的横坐标

6.pageY - 触摸点相对于根元素的纵坐标

7.target - 触摸点所在的元素ID

8.timestamp - 触摸事件的时间戳，可用于移动速度的计算

9.touches - 当前屏幕上的所有触摸点的集合

一个gestureState对象有如下的字段：

stateID:触摸状态的ID。在屏幕上有至少一个触摸点的情况下，这个ID会一直有效。

moveX:最近一次移动时的屏幕横坐标

moveY:最近一次移动时的屏幕纵坐标

x0:当响应器产生时的屏幕坐标

y0:当响应器产生时的屏幕坐标

dx:从触摸操作开始时的累计横向路程

dy:从触摸操作开始时的累计纵向路程

vx:当前的横向移动速度

vy:当前的纵向移动速度

numberActiveTouches:当前在屏幕上的有效触摸点的数量

用法：

1建立监视器

利用api提供的create，开发者可以建立起一个监视器

2将监视器与监视区域挂接

第三句是正式挂接

下一篇介绍事件，包括单次点击和移动手势事件