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

佚名 5年前 (2019-05-14) 随笔 656人围观抢沙发百度已收录

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

PanResponder介绍

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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