React Native中的手势库PanResponder详解

799 阅读3分钟

最近项目中,需要封装一个swipeRow组件,支持滑动删除列表中的数据。在封装的过程中,用到了RN中的手势库PanResponder,于是简单了解了一下它的使用方法。

PanResponder库用于处理用户的手势操作,如单点触摸滑屏、多点触摸放大缩小等手势。

使用PanResponder,代码如下:

import {PanResponder} from 'react-native' //引入PanResponder

this._panResponder = PanResponder.create({
    // 返回ture时,表示该组件愿意成为触摸事件的响应者,如触摸点击。默认返回false。
    onStartShouldSetPanResponder: () => true,  
    // 返回ture时,表示该组件愿意成为触摸(滑屏)事件的响应者,如触摸滑屏,默认返回false。
    onMoveShouldSetPanResponder: () => true, 
    // 与onStartShouldSetPanResponder相同,当此组件A里包含了子组件B也为触摸事件响应者时,若此时设为true,则父组件A优先级更高
    onStartShouldSetPanResponderCapture: () => true, 
     // 与onMoveShouldSetPanResponder相同,当此组件A里包含了子组件B也为触摸事件响应者时,若此时设为true,则父组件A优先级更高
    onMoveShouldSetPanResponderCapture: () => true,
    // 手势刚开始触摸(即刚接触屏幕时)时,若响应成功则触发该事件
    onPanResponderGrant: (evt, gestureState) => {},    
    // 手势刚开始触摸(即刚接触屏幕时)时,若响应失败则触发该事件,失败原因有可能是其它组件正在响应手势且不肯放权
    onResponderReject: (evt, gestureState) => {}, 
    // 手势滑动时触发该事件
    onPanResponderMove: (evt, gestureState) => {},    
    // 手势松开时触发该事件
    onPanResponderRelease: (evt,gestureState) => {},    
    // 当其它组件需要响应手势时,此时为ture则表示本组件愿意放权给其它组件响应;为false时表示不放权,依然由本组件来响应手势事件
    onPanResponderTerminationRequest: (evt, gestureState) => true, 
    // 当组件响应放权后(即由其它组件拿到了手势响应权)触发该事件
    onPanResponderTerminate: (evt, gestureState) => {} 
});

监听的事件中都会返回2个回调参数,evt 和 gestureState。

参数1:evt字段下的nativeEvent(evt.nativeEvent)对属性及描述如下:

属性描述
changedTouches所有发生变化的触摸事件的数组集合,该属性数据可用于多个触摸点
identifier触摸点的 ID
locationX触摸点相对于父元素的横坐标
locationY触摸点相对于父元素的纵坐标
pageX触摸点相对于根元素的横坐标
pageY触摸点相对于根元素的纵坐标
target触摸点所在的元素 ID
timestamp触摸事件的时间戳,可用于移动速度的计算
touches当前屏幕上的所有触摸点的集合。与changedTouches区别在于:当响应拖动Move事件时,与changedTouches数据一样。在响应释放Release事件时,touches将没有数据而changedTouches有。

参数2:gestureState字段格式:

属性描述
stateID触摸状态的 ID。在屏幕上有至少一个触摸点的情况下,这个 ID 会一直有效。
moveX触摸点相对于根元素的横坐标,该坐标值会随着手势移动而变化
moveY触摸点相对于根元素的纵坐标,该坐标值会随着手势移动而变化
x0当刚发生手势响应时触摸点相对于根元素的横坐标,该坐标值不会随着手势移动而变化
y0当刚发生手势响应时触摸点相对于根元素的纵坐标,该坐标值不会随着手势移动而变化
dx从触摸操作开始时的累计横向路程
dy从触摸操作开始时的累计纵向路程
vx当前的横向移动速度
vy当前的纵向移动速度
numberActiveTouches当前在屏幕上的有效触摸点的数量,如当只有一根手指头触摸屏幕时,值为1