ReactNative 手势

作者: 阳光下慵懒的驴 | 来源:发表于2016-11-24 16:56 被阅读245次

    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 被异常终止,例如电话或者另一个组件成为新的响应者

    相关文章

      网友评论

        本文标题:ReactNative 手势

        本文链接:https://www.haomeiwen.com/subject/ncobpttx.html