codecamp

全景响应器

PanResponder 将几个触发调节成一个单一的触发动作。该方法可以使单一触发动作对额外的触发具有弹性,可以用来识别简单的多点触发动作。

它为响应处理程序提供了一个可预测包,这个相应处理程序是由动作应答系统提供的。对每一个处理程序,在正常事件旁提供了一个新的 gestureState 对象。 一个 gestureState 对象有以下属性:

  • stateID-gestureState 的ID-在屏幕上保持至少一个触发动作的时间

  • moveX-最近动态触发的最新的屏幕坐标

  • x0-应答器横向的屏幕坐标

  • y0-应答器纵向的屏幕坐标

  • dx-触发开始后累积的横向动作距离

  • dy-触发开始后累积的纵向动作距离

  • vx-当前手势的横向速度

  • vy-当前手势的纵向速度

  • numberActiveTouch-屏幕上当前触发的数量

基本用法

    componentWillMount: function() {        
this._panGesture = PanResponder.create({          // Ask to be the responder:          onStartShouldSetPanResponder: (evt, gestureState) => true,          onStartShouldSetPanResponderCapture: (evt, gestureState) => true,          onMoveShouldSetPanResponder: (evt, gestureState) => true,          onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,          onPanResponderGrant: (evt, gestureState) => {            // The guesture has started. Show visual feedback so the user knows            // what is happening!            // gestureState.{x,y}0 will be set to zero now
          },          onPanResponderMove: (evt, gestureState) => {            // The most recent move distance is gestureState.move{X,Y}            // The accumulated gesture distance since becoming responder is
           // gestureState.d{x,y}
          },          onResponderTerminationRequest: (evt, gestureState) => true,          onPanResponderRelease: (evt, gestureState) => {            // The user has released all touches while this view is the            // responder. This typically means a gesture has succeeded
          },          onPanResponderTerminate: (evt, gestureState) => {            // Another component has become the responder, so this gesture            // should be cancelled
          },
        });
      },      render: function() {        return (
         <View {...this._panResponder.panHandlers} />
        );
      },

工程实例

想要查看它的实际应用,尝试 PanResponder example in UIExplorer

方法

static create(config: object)

@param {object} 所有应答器回调配置的增强版本,应答器回调不仅可以提供典型的 ResponderSyntheticEvent,还可以提供 PanResponder 动作状态。在每一个典型的 onResponder* 回调中,用 PanResponder  Responder 做简单的替换。例如, config对象可能看起来像如下形式:

  • onMoveShouldSetPanResponder: (e, gestureState) => {...}

  • onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}

  • onStartShouldSetPanResponder: (e, gestureState) => {...}

  • onStartShouldSetPanResponderCapture: (e, gestureState) => {...}

  • onPanResponderReject: (e, gestureState) => {...}

  • onPanResponderGrant: (e, gestureState) => {...}

  • onPanResponderStart: (e, gestureState) => {...}

  • onPanResponderEnd: (e, gestureState) => {...}

  • onPanResponderRelease: (e, gestureState) => {...}

  • onPanResponderMove: (e, gestureState) => {...}

  • onPanResponderTerminate: (e, gestureState) => {...}

  • onPanResponderTerminationRequest: (e, gestureState) => {...}

一般来说,对于那些捕获的等价事件,我们在捕获阶段更新一次 gestureState ,并且也可以在冒泡阶段使用。

在 onStartShould* 回调时需要注意一点。在对节点的捕获/冒泡阶段的开始/结束事件中,它们只对更新后的gestureState 做出反应。一旦节点成为应答器,你可以依靠每一个被动作和 gestureState 处理后相应更新的开始/结束事件。 (numberActiveTouches) 可能不完全准确,除非你是应答器。


网络信息
像素比率
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }