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

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>
         )
     }
 }

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

猜你喜欢

转载自www.cnblogs.com/tengyuxin/p/12067058.html
RN