ReactNative手势

---

目录

• 1）基本手势
• 2）手势动画

---

1）基本手势

方法	说明
onStartShouldSetResponder: (evt) => true	ACTION_DOWN时是否成为响应者
onMoveShouldSetResponder: (evt) => true	ACTION_MOVE时是否成为响应者
onPanResponderGrant: (evt, gestureState) =>{}	ACTION_DOWN事件
onPanResponderMove: (evt, gestureState) =>	ACTION_MOVE事件
onPanResponderRelease: (evt, gestureState) =>	ACTION_UP事件

12月-07-2017 16-29-11.gif

gestureState{}	参数说明
stateID	触摸状态的ID。在屏幕上有至少一个触摸点的情况下，这个ID会一直有效
x0 y0	当响应器产生时的屏幕坐标,即ACTION_DOWN时的坐标
moveX moveY	移动时的屏幕横坐标,右下方向分别为xy轴正向
dx dy	从触摸操作开始时的累计横纵向路程,开始触摸点的右下为xy轴正向，左上为xy轴反向
vx vy	横纵向移动速
numberActiveTouches	当前在屏幕上的有效触摸点的数量

export default class TouchAnim extends Component {
  constructor(props) {
    super(props);
    this.state = {
        gestureState:{},
    };
    this._panResponder = PanResponder.create({
        // 要求成为响应者：
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
        onMoveShouldSetPanResponder: (evt, gestureState) => true,
        onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
        // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
      },
      onPanResponderMove: (evt, gestureState) => {
        // 移动手势操作
        this.setState({
            gestureState:gestureState,
        })
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {
        // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
        // 一般来说这意味着一个手势操作已经成功完成。
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
        // 默认返回true。目前暂时只支持android。
        return true;
      },
    });
  }

  render() {
    return (
       <View 
          {...this._panResponder.panHandlers} 
          style={styles.container}>
        <Text>stateID 触摸状态的ID = {this.state.gestureState.stateID}</Text>
        <Text>moveX 最近一次移动时的屏幕横坐标 = {this.state.gestureState.moveX}</Text>
        <Text>moveY 最近一次移动时的屏幕纵坐标 = {this.state.gestureState.moveY}</Text>
        <Text>x0 当响应器产生时的屏幕坐标 = {this.state.gestureState.x0}</Text>
        <Text>y0 当响应器产生时的屏幕坐标 = {this.state.gestureState.y0}</Text>
        <Text>dx 从触摸操作开始时的累计横向路程 = {this.state.gestureState.dx}</Text>
        <Text>dy 从触摸操作开始时的累计纵向路程 = {this.state.gestureState.dy}</Text>
        <Text>vx 当前的横向移动速度 = {this.state.gestureState.vx}</Text>
        <Text>vy 当前的纵向移动速度 = {this.state.gestureState.vy}</Text>
        <Text>numberActiveTouches 当前在屏幕上的有效触摸点的数量 = {this.state.gestureState.numberActiveTouches}</Text>
       </View>
    );
  }
}

---

2）手势动画

12月-07-2017 17-03-03.gif

export default class TouchAnim extends Component {
  constructor(props) {
    super(props);
    this.state = {
        animVal : new Animated.ValueXY(),   //ValueXY是一个方便的处理2D交互的办法，譬如旋转或拖拽
    };

    this._panResponder = PanResponder.create({
        // 要求成为响应者：
        onStartShouldSetPanResponder: (evt, gestureState) => true,

        // 开始手势操作。
        onPanResponderGrant: (evt, gestureState) => {
            
        },
        
        // 移动手势操作
        onPanResponderMove: //绑定动画
            Animated.event([
                null,   //忽略原生事件
                {dx:this.state.animVal.x,dy:this.state.animVal.y}
            ]),

        // 释放手势
        onPanResponderRelease: (evt, gestureState) => {
            //弹性动画，回到原点
            Animated.spring(this.state.animVal,{
                toValue:{x:0,y:0},
                friction:1,
                tension:100,
            }).start();
        },
    });
  }

  render() {
    return (
        <View style={styles.container}>
            <Animated.View 
                {...this._panResponder.panHandlers}  
                style={{
                    backgroundColor:'orange',
                    width:50,height:50,
                    borderRadius:25,
                    transform:[
                        {
                            translateX:this.state.animVal.x
                        },
                        {
                            translateY:this.state.animVal.y
                        }
                    ]
                }}/>
        </View>
    );
  }
}

---

参考资料

官网

---