PanResponder平底锅的响应者
PanResponder类可以将多点触摸操作协调城一个手势,它使得一个单点触摸可以接受更多的触摸操作,也可以用于识别简单的多点触摸手势。
PanResponder的基本思想是:监视屏幕上指定大小、位置的矩形区域,当用手指按压这个区域中的某个点后,开发者会收到这个事件,当按压后拖动手指时,会收到手势引发的各类事件,当手指离开这个矩形区域时,开发者也会收到相应的事件。
注意:开发者可以任意指定监视矩形区域的大小,但在这个区域里,只有第一个按下的事件会上报和继续监视处理,如果第一个手指按下还没有离开,接着第二个手指又来按下了,那么第二个手指的各种触摸事件无法捕获。
注意:开发者可以在屏幕上指定多个监视矩形区域,但不能同时监视多个矩形区域的不同触摸事件
注意:监视区域会阻止被监视区域覆盖的组建接受触摸事件,比如监视区域覆盖了一个按钮,那么就无法通过按这个按钮来触发其对应的事件,只能在PanResponder监视器的事件处理中对触摸行为进行处理
利用PanResponder实现监视器有以下几个步骤:
1.指定监视区域。如果件事去有多个,一定不能重叠,否则都失效
2.定义监视器相关变量
指向监视器的变量(必须有)、指向监视器监视区域的变量(可以有)、记录监视区域左上角顶点坐标的两个数值变量(可以有)、上一次触摸点的横纵坐标变量(可以有)
3.准备监视器的事件处理函数
4.建立监视器(PanResponder.create)
5.将监视器与监视区域关联{...this._panResponder.panHandlers}
...............................................................................................................................................................................
它提供了一个对触摸响应系统响应器的可预测的包装。对于每一个处理函数,它在原生事件之外提供了一个新的gestureState
对象。
基本用法
componentWillMount: function() { this._panResponder = PanResponder.create({ // 要求成为响应者: onStartShouldSetPanResponder: (evt,gestureState) => true,onStartShouldSetPanResponderCapture: (evt,onMoveShouldSetPanResponder: (evt,onMoveShouldSetPanResponderCapture: (evt,//处理手指按下(点击)事件 onPanResponderGrant: (evt,gestureState) => { // 开始手势操作。给用户一些视觉反馈,让他们知道发生了什么事情! // gestureState.{x,y} 现在会被设置为0 },//处理手指移动的事件 onPanResponderMove: (evt,gestureState) => { // 最近一次的移动距离为gestureState.move{X,Y} // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y} },onPanResponderTerminationRequest: (evt,onPanResponderRelease: (evt,gestureState) => { // 用户放开了所有的触摸点,且此时视图已经成为了响应者。 // 一般来说这意味着一个手势操作已经成功完成。 },onPanResponderTerminate: (evt,gestureState) => { // 另一个组件已经成为了新的响应者,所以当前手势将被取消。 },onShouldBlockNativeResponder: (evt,gestureState) => { // 返回一个布尔值,决定当前组件是否应该阻止原生组件成为JS响应者 // 默认返回true。目前暂时只支持android。 return true; },}); },render: function() { return ( <View {...this._panResponder.panHandlers} /> ); },