FlingGestureHandler - react-nati

文档来源：

• FlingGestureHandler

分离类型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 属性即可