在实现用户左右滑动完成不同操作时，使用react-native的官方API——PanResponder响应用户手势操作。
PanResponder介绍
PanResponder类可以将多点触摸操作协调成一个手势。它使得一个单点触摸可以接受更多的触摸操作，也可以用于识别简单的多点触摸手势。
默认情况下PanResponder会通过InteractionManager来阻止长时间运行的 JS 事件打断当前的手势活动。
它提供了一个对触摸响应系统响应器的可预测的包装。对于每一个处理函数，它在原生事件之外提供了一个新的gestureState对象：
onPanResponderMove: (event, gestureState) => {}
基本用法
componentWillMount: function() {
this._panResponder = PanResponder.create({
// 要求成为响应者：
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
// 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
// gestureState.{x,y} 现在会被设置为0
},
onPanResponderMove: (evt, gestureState) => {
// 最近一次的移动距离为gestureState.move{X,Y}
// 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
// 用户放开了所有的触摸点，且此时视图已经成为了响应者。
// 一般来说这意味着一个手势操作已经成功完成。
},
onPanResponderTerminate: (evt, gestureState) => {
// 另一个组件已经成为了新的响应者，所以当前手势将被取消。
},
onShouldBlockNativeResponder: (evt, gestureState) => {
// 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
// 默认返回true。目前暂时只支持android。
return true;
},
});
},
render: function() {
return (
<View {...this._panResponder.panHandlers} />
);
},
这里仅介绍项目中使用到的两个属性，onMoveShouldSetPanResponder、onPanResponderRelease。
- onMoveShouldSetPanResponder：移动时根据此属性冒泡询问本元素是否获得手势权
- onPanResponderRelease：用户放开所有触摸点且本元素已成为响应者时将执行的函数
一个gestureState对象有如下的字段：
stateID- 触摸状态的 ID。在屏幕上有至少一个触摸点的情况下，这个 ID 会一直有效。moveX- 最近一次移动时的屏幕横坐标moveY- 最近一次移动时的屏幕纵坐标x0- 当响应器产生时的屏幕坐标y0- 当响应器产生时的屏幕坐标dx- 从触摸操作开始时的累计横向路程dy- 从触摸操作开始时的累计纵向路程vx- 当前的横向移动速度vy- 当前的纵向移动速度numberActiveTouches- 当前在屏幕上的有效触摸点的数量
在项目中的使用
/* 渲染一个收藏项数据 */
_renderItem = (item) => {
let item1 = item;
var Id = item1.item.key;
let _panResponder = PanResponder.create({
onMoveShouldSetPanResponder: (evt, gestureState) => {
/* 这里仅当用户滑动的距离较长才响应用户操作，考虑实际用户点击是手指的一片区域，而不是测试时的鼠标单击，实际使用时即使是单击也可能有一定的位移 */
if(gestureState.dx < -screenWidth*0.1 || gestureState.dx > screenWidth*0.1){
return true;
}
else{
return false;
}
},
onPanResponderRelease: (evt, gestureState)=>{
if(gestureState.dx < 0) {
/* 左滑删除该项收藏 */
this._onPressDelBookmarks(WzLinkId);
}
else{
/* 右滑编辑收藏 */
this._onPressEditBookmarks(WzLinkId);
}
},
});
return(
<View style={flatStylesWithAvatar.cell} {..._panResponder.panHandlers}>
<TouchableOpacity style = {flatStylesWithAvatar.listcontainer}
onPress={()=>console.log('单击了该项')}
>
具体内容
</TouchableOpacity>
</View>
)
};
这里对列表中的每一项都创建一个PanResponder对象，绑定不同的操作。