RN 手势响应系统基本用法和获取坐标判断用户手势方向

Posted 2021-03-22 tengyuxin

1. 基本使用，
注意两点

（1）将手势系统的函数放在“componentWillMount”生命周期函数里面，当时会有警告，警告自己看吧

（2）将方法使用ES6扩展运算符展开

 import React from ‘react‘;
 import {View,Text} from ‘react-native‘;

 export default class My extends React.Component{
     constructor(props){
         super(props);
        
     }
     UNSAFE_componentWillMount(){
         this.gestureHandlers = {

            onMoveShouldSetResponder: (evt) => {
                console.log(‘onMoveShouldSetResponder‘);
                return true;
            },
            // 现在要开始响应触摸事件了。这也是需要做高亮的时候，使用户知道他到底点到了哪里。
            onResponderGrant:(event)=>{
                console.log(‘onResponderGrant‘);
                console.log(event);
                console.log(event.nativeEvent);
            },
            
            //具体响应事件：（1）用户正在屏幕上移动手指时 ，“注意”触发次数过于频繁
            onResponderMove:(evt)=>{
                console.log(‘用户正在移动手指，且没离开‘);
            },
            onResponderRelease:(event)=>{
                console.log(‘手指移动后，释放‘);
                console.log(event);
                console.log(event.nativeEvent);
            }
        } 
     }
     render(){
         return (
            <View 
                style={{flex:1,backgroundColor:"yellow"}}
                {...this.gestureHandlers}
            >
            </View>
         )
     }
 }

*** 当然我省略了一些手势函数，这是你就可以在控制台看到效果了