zoukankan      html  css  js  c++  java
  • 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函数里,获取最终位置坐标,之后,先判断,是横向移动还是竖向移动,确定好了方向,再通过正负值,判断具体方向

  • 相关阅读:
    CF1082E Increasing Frequency
    CF1083B The Fair Nut and String
    week2
    CF1082G Petya and Graph
    后缀数组学习笔记
    单纯形法
    验证rbd的缓存是否开启
    如何删除一台OSD主机
    Mon失效处理方法
    查询osd上的pg数
  • 原文地址:https://www.cnblogs.com/tengyuxin/p/12067058.html
Copyright © 2011-2022 走看看