ReactNative 手势

View可用的手势

// 这三个方法, 不管是不是最上层组件, 都能响应
onTouchStart={()=>console.log('start')}
onTouchMove={()=>console.log('move')}
onTouchEnd={()=>console.log('end')}

PanResponder 手势监视器

// 创建监视器
this.panResponder = PanResponder.create({
  onStartShouldSetPanResponder: ()=>{},
  ...
})

// 在View中使用

事件参数

每个事件都有两个返回参数nativeEvent, gestureState
nativeEvent基本无用

gestureState包含以下成员变量:

• stateID 此次触摸事件的ID
• moveX 最近一次移动的屏幕坐标
• moveY
• x0 响应器产生时的屏幕坐标（手势第一个坐标）
• y0
• dx 触摸开始累积的横向路程
• dy
• vx 当前的横向移动速度
• vy
• numberActiveTouches 触摸点数量

事件生命周期

单点事件

• onStartShouldSetResponderCapture 在开始触摸时的捕获期，返回是否愿意成为响应者，如果是true，调过下一步，如果是false，继续执行下一步。
• onStartShouldSetResponder 在用户开始触摸的时候（手指刚刚接触屏幕的瞬间），返回是否愿意成为响应者
• onPanResponderGrant 监视器发出通知开始工作
• onPanResponderStart 触摸事件正式被监视
• onPanResponderEnd 触摸事件结束
• onPanResponderRelease 监视器被释放

移动事件

• onMoveShouldSetResponderCapture 在捕获期确定是否捕获移动事件
• onMoveShouldSetPanResponder 确定是否处理移动事件
• onPanResponderGrant 监视器发出通知开始工作
• onPanResponderMove 当触摸移动调用

异常事件

• onPanResponderReject 监视某个区域被拒绝
• onPanResponderTerminationRequest 监视器被要求终止，返回false表示不同意终止，或者不处理
• onPanResponderTermination 被异常终止，例如电话或者另一个组件成为新的响应者