[技术博客]使用PanResponder实现响应左右滑动手势

在实现用户左右滑动完成不同操作时，使用react-native的官方API——PanResponder响应用户手势操作。

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对象，绑定不同的操作。