PanGestureHandler - react-native

文档来源：

• PanGestureHandler

连续类型handler, 手指滑动一段初始距离来激活这个handler，可配置部分：

• 滑动的距离
• 只允许水平或者垂直滑动
• 需要的手指的数量

手势的回调可以用于追踪连续的滑动手势

• 提供从手势开始关于移动（translation）信息
• 可以追踪速度

自定义激活标准（Custom activation criteria）

PanGestureHandler 提供手势被识别(activate)或者不被识别(fail)的标准。如果设置了多个识别条件，则需要这些条件都满足，PanGestureHandler才能正确的被activate，又一个不满足，都不能激活。

比如：

• 如果同时将 minDeltaX 和 minDeltaY 的值设置为 20， 则需要激活前，需要手指在X和Y轴都至少滑动20 points 的距离才行
• 再比如，maxDeltaX 和 maxDeltaY 的值同时设为 20， minDist 设置为 23，假如我们沿着X轴滑动20 points，沿着Y轴滑动0，这是手势不会被激活，尽管Y轴在移动范围内

多点滑动处理 （Multi touch pan handling）

如果依赖多点触控，iOS和Android的处理是又差异的。区别在于 translation 属性在手势激活状态中被计算的方式不同：

• iOS：如果有多个激活点，iOS中会取这些点的平均点（类似于质量中心）当作一个点来处理，这和大多数原生组件的处理方式是一样的
• 但是有些原生组件，比如 scroll view， pager views 或drawers，则对多点处理有点不一样，它们以 最后一个手指放置的位置作为依据，Android中可以通过 avgTouches 属性来改变这种行为
• iOS和android中，当额外的手指放在屏幕上时，即时被追踪的点的位置可能发生了改变，但是 translation 属性也不会受到影响。因此大多数时候，依赖 translation 是可靠的，如果想知道手指质量中心的虚拟手指位置可以使用 event 提供的相对或者绝对位置（x 和 y 或者 absoluteX 和 absoluteY）

属性 （properties）

属性除了公用属性外，下面是 PanGestureHandler 的属性：

• minDist：激活的滑动手势需要滑动的最小距离，单位 points
• minPointers：最小手指的数量，大于等于0
• maxPointers：最大手指的数量
• activeOffsetX：沿着X轴手指滑动而不激活handler的范围，移动超过了这个范围则会激活hanler。Range 可以是一个数组或者单一数值，如果设置为数组，第一个值必须必须小于等于0，第二个值必须大于等于0。如果只提供了一个值 p，如果 p >= 0 则表示 (-inf, p), 如果 p < 0, 则表示 (-p, inf).
• activeOffsetY： 同上，只是针对Y轴
• failOffsetX：当手指沿着X轴活动距离超过这个范围，如果handler还没有被激活，则手势识别失败。Range 可以是一个数组或者单一数值，如果设置为数组，第一个值必须必须小于等于0，第二个值必须大于等于0。如果只提供了一个值 p，如果 p >= 0 则表示 (-inf, p), 如果 p < 0, 则表示 (p, inf).
• failOffsetY: 同上，只是针对Y轴
• minDeltaX | minDeltaY | maxDeltaX | maxDeltaY: 已废弃，可以用上面的4个属性替换
• avgTouches： Android only

事件数据 （event data）

下面是 PanGestureHandler 特定的事件包含的属性：

• translationX： 沿着X轴累加的位置，单位为points
• translationY：同上，针对Y轴
• velocityX：当前时刻沿着X轴滑动的速度，单位 points/sec
• velocityY： 同上，针对Y轴
• x：相对于手势处理对应的视图，当前的x坐标，单位 points
• y：同上，y坐标
• absoluteX：相对于 根视图（root view） 的x轴坐标，推荐使用这个属性，而不是 x属性，以免原始视图因为手势导致transformation，x属性也跟着发生变化
• absoluteY：同上，针对Y轴，同样推荐使用这个属性，而不是 y属性

示例 拖动盒子

• react-native-gesture-handler examples - draggable

import React, { PureComponent } from 'react';
import { Animated, StyleSheet, View } from 'react-native';
import { PanGestureHandler, ScrollView, State } from 'react-native-gesture-handler';

import { USE_NATIVE_DRIVER } from '../config';
import LoremIpsum from '../common';

class DraggableBox extends PureComponent {
  constructor(props) {
    super(props);

    this._translateX = new Animated.Value(0);
    this._translateY = new Animated.Value(0);
    this._lastOffset = { x: 0, y: 0 };


    // 这个针对的时所有Handler中的 onGestureEvent 属性
    // 当handler处于 'ACTIVE' 状态时， 对每一个后续的触摸事件的回调函数
    // event 参数包含 {state, numberOfPointers} 公共属性，还有一些特定Handlers包含的属性也不一样
    // 比如 PinchGestureHandler 还包含 'scale' 属性，表示手势开始后手指之间的距离如何变化
    // 除了使用回调函数，还可以使用 Animated.event 对象 也支持 'useNativeDriver' flag
    // 这里使用的时 Animated.event 对象
    this._onGestureEvent = Animated.event(
      [
        {
          nativeEvent: {
            // 注意这里是 translationX 不是 translateX
            translationX: this._translateX,
            translationY: this._translateY,
          },
        },
      ],
      // 注意这个对象不在上面的数组中
      {
        useNativeDriver: USE_NATIVE_DRIVER,
      }
    );
  }

  // 这个针对的时所有Handler中的 onHandlerStateChange 属性
  // 当给定的handler的state发生变化时的回调
  // event和 onGestureEvent中的event 一样，但是这里的event还包含一个 'oldState' 属性，表示handler状态改变之前的state
  // 除了使用回调，也可以使用 Animated.event 对象，也支持 'useNativeDriver' flag
  // 这里使用的回调函数
  _onHandleStateChange = event => {
    // event 包含一个 'oldState' 属性，表示handler状态改变之前的state
    if (event.nativeEvent.oldState === State.ACTIVE) {
      // PanGestureHandler event的nativeEvent包含的 translationX, translationY 属性
      this._lastOffset.x += event.nativeEvent.translationX;
      this._lastOffset.y += event.nativeEvent.translationY;
      this._translateX.setOffset(this._lastOffset.x);
      this._translateX.setValue(0);
      this._translateY.setOffset(this._lastOffset.y);
      this._translateY.setValue(0);
    }
  }

  render() {
    return (
      <PanGestureHandler
        {...this.props}
        onGestureEvent={this._onGestureEvent}
        onHandlerStateChange={this._onHandleStateChange}
      >
        <Animated.View
          style={[
            styles.box,
            {
              transform: [
                { translateX: this._translateX },
                { translateY: this._translateY },
              ],
            },
            this.props.boxStyle,
          ]}
        />
      </PanGestureHandler>
    )
  }
}


export default class DraggableExample extends PureComponent {
  render() {
    return (
      <ScrollView style={styles.scrollView}>
        <LoremIpsum words={40} />
        <DraggableBox />
        <LoremIpsum />
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    paddingHorizontal: 10,
    paddingVertical: 20,
  },
  box: {
    width: 150,
    height: 150,
    alignSelf: 'center',
    backgroundColor: '#72a',
    margin: 10,
    zIndex: 200,
  },
})

将DraggableExample放到页面中，即可拖动页面中紫色的盒子，主要使用：

• onGestureEvent
• onHandlerStateChange
• State: State.ACTIVE
• event.nativeEvent.oldState: 表示handler状态改变之前的状态
• Animated.event 对象