React Native 手势响应系统

移动设备上的手势识别要比在web上复杂得多。用户的一次触摸操作的真实意图是什么，App要经过好几个阶段才能判断。比如App需要判断用户的触摸到底是在滚动页面，还是滑动一个widget（小修饰件），或者只是一个单纯的点击。甚至随着持续时间的不同，这些操作还会转化。此外，还有多点同时触控的情况。

触摸响应系统可以使组件在不关心父组件或子组件的前提下自行处理触摸交互。具体的实现在ResponderEventPlugin.js文件中，你可以在源码中读到更多细节和文档。

最佳实践

用户之所以会觉得web app 和原生app在体验上有巨大的差异，触摸响应是一大关键因素。用户的每一个操作都应该具有下面的属性：

a.反馈/高亮 —让用户看到他们到底按到了什么东西，以及松开后会发生什么。

b.取消功能  —当用户正在触摸操作时，应该是可以通过把手指移开来终止操作。

这些特性使得用户在使用App时体验更好，因为它们可以让用户大胆试用，而不必担心点错了什么。

TouchableHighlight与Touchable系列组件#

响应系统用起来可能比较复杂。所以我们提供了一个抽象的Touchable实现，用来做“可触控”的组件。这一实现利用了响应系统，使得你可以简单地以声明的方式来配置触控处理。如果要做一个按钮或者网页链接，那么使用TouchableHighlight就可以。

响应者的声明周期

一个view只要实现了正确的协商方法，就可以成为触摸事件的响应者。我们通过两个方法去“询问”一个view是否愿意成为响应者：

View.props.onStartShouldSetResponder:(evt) => true  — 在用户开始触摸的时候（手指刚刚接触屏幕的瞬间），是否愿意成为响应者？

View.props.onMoveShouldSetResponder:(evt) => true — 如果View不是响应者，那么在每个触摸点开始移动（没有停下也没有离开屏幕）时再询问一次：是否愿意响应触摸交互呢？

如果View已经开始响应触摸事件了。那么下列这些处理函数会被一一调用：

View.props.onResponderMove:(evt) => {} —用户正在屏幕上移动手指（没有停下也没有离开屏幕），

View.props.onResponderRelease :(evt) => {} —触摸操作结束时触发，比如“touchUp”（手指抬起离开屏幕）

View.props.onResponderTerminationRequest:(evt) =>true —有其他组件请求接替响应者，当前的View是否“放权”？返回true的话释放响应者权力。

View.props.onResponderTerminate: (evt) => {} —响应者权力已经交出。这可能是由于其他View通过 onResponderTerminationRequest请求的也可能是由操作系统强制夺权（比如iOS上的控制中心或是通知中心）。

evt是一个合成事件，它包含以下结构：

• nativeEvent
  • changedTouches -在上一次事件之后，所有发生变化的触摸事件的数组集合（即上一次事件后，所有移动过的触摸点）
  • identifier -触摸点的ID
  • locationX -触摸点相对于父元素的横坐标
  • locationY -触摸点相对于父元素的纵坐标
  • pageX -触摸点相对于根元素的横坐标
  • pageY -触摸点相对于根元素的纵坐标
  • target -触摸点所在的元素ID
  • timestamp -触摸事件的时间戳，可用于移动速度的计算
  • touches -当前屏幕上的所有触摸点的集合

捕获ShouldSet事件处理

onStartShouldSetResponder与onMoveShouldSetResponder是以冒泡的形式调用的，即嵌套最深的节点最先调用。这意味着当多个View同时在*ShouldSetResponder中返回true时，最底层的View将优先“夺权”。在多数情况下这并没有什么问题，因为这样可以确保所有控件和按钮是可用的。

但是有些时候，某个父View会希望能先成为响应者。我们可以利用“捕获期”来解决这一需求。响应系统在从最底层的组件开始冒泡之前，会首先执行一个“捕获期”，在此期间会触发on*ShouldSetResponderCapture系列事件。因此，如果某个父View想要在触摸操作开始时阻止子组件成为响应者，那就应该处理onStartShouldSetResponderCapture事件并返回true值。

• View.props.onStartShouldSetResponderCapture:(evt) => true,
• View.props.onMoveShouldSetResponderCapture:(evt) => true,

PanResponder#

要使用更高级的手势功能，请参看PanResponder.