文档来源：
连续类型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属性
示例 拖动盒子
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放到页面中，即可拖动页面中紫色的盒子，主要使用：
onGestureEventonHandlerStateChange-
State: State.ACTIVE -
event.nativeEvent.oldState: 表示handler状态改变之前的状态 -
Animated.event对象
