react native之PanResponder手势识别初探

前端之家收集整理的这篇文章主要介绍了react native之PanResponder手势识别初探前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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} />
    );
  },

方法

猜你在找的React相关文章