View可用的手势
// 这三个方法, 不管是不是最上层组件, 都能响应
onTouchStart={()=>console.log('start')}
onTouchMove={()=>console.log('move')}
onTouchEnd={()=>console.log('end')}
PanResponder 手势监视器
// 创建监视器
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: ()=>{},
...
})
// 在View中使用
<View
{...this.panResponder}
/>
事件参数
每个事件都有两个返回参数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 被异常终止,例如电话或者另一个组件成为新的响应者