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

1. 基本使用,
注意两点

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

(2)将方法使用ES6扩展运算符展开

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


export default class DetailScreen extends React.Component{
    UNSAFE_componentWillMount(){  
      // 申请成为触摸事件响应者 -> 成为触摸事件响应者 -> 处理触摸事件 -> 释放触摸事件 -> 触摸事件结束
      
   let [beginX,beginY,endX,endY] = [0,0,0,0]; this.gestureHandlers = { onMoveShouldSetResponder: (evt) => { console.log('onMoveShouldSetResponder'); return true; }, // 现在要开始响应触摸事件了。这也是需要做高亮的时候,使用户知道他到底点到了哪里。 onResponderGrant:(event)=>{ console.log('onResponderGrant'); console.log(event.nativeEvent); let obj = event.nativeEvent; beginX = parseInt(obj.locationX); beginY = parseInt(obj.locationY); }, //具体响应事件:(1)用户正在屏幕上移动手指时 ,“注意”触发次数过于频繁 onResponderMove:(event)=>{ console.log('用户正在移动手指,且没离开'); }, onResponderRelease:(event)=>{ console.log('手指移动后,释放'); console.log(event.nativeEvent); let obj = event.nativeEvent; endX = parseInt(obj.locationX); endY = parseInt(obj.locationY); let result = Math.abs(endX-beginX)>Math.abs(endY-beginY) if(result){ console.log('横向移动之后,判断是做正负'); if(endX>beginX){ console.log('向右'); console.log(this.props); }else{ console.log('向左'); } }else{ console.log('竖向移动'); } } } } render(){ return ( <View style={{flex:1,backgroundColor:'yellow'}} {...this.gestureHandlers} > <Text>详情界面</Text> </View> ) } }

*** 判断手势方向 , 我定义了 四个变量 (beginX,beginY,endX,EndY),在 onResponderGrant函数里,获得初始位置坐标 , 在onResponderRelease函数里,获取最终位置坐标,之后,先判断,是横向移动还是竖向移动,确定好了方向,再通过正负值,判断具体方向

原文地址:https://www.cnblogs.com/tengyuxin/p/12067058.html