文档来源：
分离类型handler, 当动作足够长并且快时激活。当handler被激活，手指释放是，state将变为 END。
如果handler在激活之前，手指就松开了，handler将识别失败，iOS中使用 UISwipeGestureRecognizer 实现，而Android中是自定义实现。
属性 （properties）
属性除了公用属性外，下面是 FlingGestureHandler 的特定属性：
-
direction: 表示动作的移动方向，可以设置单一值，也可以设置多个值direction={Directions.RIGHT | Directions.LEFT} direction={Directions.UP} numberOfPointers: 手指数量
事件数据（event data）
除了基本的event属性，下面是 FlingGestureHandler特定的event属性：
-
x：当前手指相对于handler给定的视图上的x坐标（多个手指时，以第一个手指触摸的点为准），单位 points -
y： 同上，表示y坐标 -
absoluteX：当前手指相对于handler 根视图 上的x坐标（多个手指时，以第一个手指触摸的点为准），推荐使用这个属性，而不是x属性，因为这个属性是相对于根视图的坐标位置，不会受到当前视图transform之后的影响， 单位 points -
absoluteY：同上，针对Y轴
示例 滑动
/**
* 当使用2个手指向上滑动时，小球会向下移动50points
* 当使用1根手指向左或者向右滑动时，小球会向左移动 50poings
*/
import React, { PureComponent } from 'react';
import { Animated, StyleSheet, View, Dimensions, Text, SafeAreaView } from 'react-native';
import { FlingGestureHandler, State, Directions } from 'react-native-gesture-handler';
import { USE_NATIVE_DRIVER } from '../config';
const { width: windowWidth } = Dimensions.get('window');
const circleRadius = 40;
const styles = StyleSheet.create({
horizontalPan: {
backgroundColor: '#f76f41',
height: 300,
justifyContent: 'center',
marginVertical: 10,
},
circle: {
backgroundColor: '#42a5f5',
borderRadius: circleRadius,
height: circleRadius * 2,
width: circleRadius * 2,
}
})
class Fling extends PureComponent {
constructor(props) {
super(props);
this._touchX = new Animated.Value(windowWidth / 2);
this._translateX = Animated.add(
this._touchX,
new Animated.Value(-circleRadius)
);
this._translateY = new Animated.Value(0);
}
// 水平方向滑动
_onHorizontalFlingHandlerStateChange = ({ nativeEvent }, offset) => {
if (nativeEvent.oldState === State.ACTIVE) {
Animated.spring(this._touchX, {
toValue: this._touchX._value + offset,
useNativeDriver: USE_NATIVE_DRIVER,
}).start();
}
};
// 垂直方向滑动
_onVerticalFlingHandlerStateChange = ({ nativeEvent }) => {
if (nativeEvent.oldState === State.ACTIVE) {
Animated.spring(this._translateY, {
toValue: this._translateY._value + 50,
useNativeDriver: USE_NATIVE_DRIVER,
}).start();
}
};
render() {
return (
<FlingGestureHandler
direction={Directions.UP}
numberOfPointers={2}
onHandlerStateChange={this._onVerticalFlingHandlerStateChange}>
<FlingGestureHandler
direction={Directions.RIGHT | Directions.LEFT}
onHandlerStateChange={ev =>
this._onHorizontalFlingHandlerStateChange(ev, -50)
}>
<View style={styles.horizontalPan}>
<Animated.View
style={[
styles.circle,
{
transform: [
{
translateX: this._translateX,
},
{
translateY: this._translateY,
},
],
},
]}
/>
</View>
</FlingGestureHandler>
</FlingGestureHandler>
);
}
}
export default class FlingGestureExample extends PureComponent {
render() {
return (
<SafeAreaView>
<Fling />
<Text>
向上使用2根手指移动或者使用一根手指向左或右移动，看会发生什么
</Text>
</SafeAreaView>
)
}
}
个人感觉这个示例没啥子用，主要知识点：
-
Directions: 这个是库暴露出来的一个枚举类，用来表示方位，枚举成员有LEFT | RIGHT | UP | DOWN - 多个
FlingGestureHandler嵌套使用，对不同方向规定使用不同的手指数量进行触发 -
Animated.spring() | Animated.add()等方法 - 据我观察（不一定准确，这只是根据当前我所接触的示例来讲的），一般对连续性的handlers，比如
PinchGestureHandler | RotationGestureHandler | PanGestureHandler，一般会同时使用onGestureEvent和onHandlerStateChange属性；对于离散型handlers，比如TapGestureHandler | LongPressGestureHandler | FlingGestureHandler一般只使用onHandlerStateChange属性即可
