当前位置: 首页 > news >正文

React Native中防止滑动过程中误触

React Native中防止滑动过程中误触

在使用React Native开发的时,当我们快速滑动应用的时候,可能会出现误触,导致我们会点击到页面中的某一些点击事件,误触导致页面元素响应从而进行其他操作,表现出非常不好的用户体验。

在这里插入图片描述

一、问题背景

常见的情形是长列表中,在滑动过程中可能会出现误触到列表中的某一项的情形,对于用户使用非常不好的体验。
如下列表组件中,就会存在滑动过程中产生误触的情况。

import React from 'react';
import { StyleSheet, Text, SafeAreaView,ScrollView,  View, TouchableOpacity, StatusBar,
} from 'react-native';const App = () => {const list = Array.from(Array(100).keys());const onPress = (e) => {alert(1);};return (<SafeAreaView style={styles.container}><ScrollView style={styles.scrollView}>{list.map((item) => {return (<TouchableOpacity onPress={onPress}><View style={styles.containerView}><Text style={styles.text}>{item}+ item</Text></View></TouchableOpacity>);})}</ScrollView></SafeAreaView>);
};const styles = StyleSheet.create({container: { flex: 1, paddingTop: StatusBar.currentHeight },scrollView: { marginHorizontal: 20 },text: { fontSize: 1 },containerView: { backgroundColor: 'pink', marginTop: 20, height: 50 },
});
export default App;

上面长列表,在滚动的过程中可能会出现误触的问题。

二、解决思路

我们应该如何处理这种情形,可以考虑从点击事件上入手,考虑根据距离的移动来进行组织是否响应点击事件
通过查看官方文档,我们能够发现点击时间在点击按下和抬起的过程中有一个过程回调,我们就可以利用这个回调进行处理误触了,有兴趣的小伙伴可以看看这块官方说明

由于点击事件执行过程原理

  • onPressIn 在按压时被调用。

  • onPressOut 在按压动作结束后被调用。
    在按下 onPressIn 后,将会出现如下两种情况的一种:

    用户移开手指,依次触发onPressOut 和onPress事件。
    按压持续 500 毫秒以上,触发onLongPress 事件。(onPressOut 在移开手后依旧会触发。)

在这里插入图片描述

可以通过监听点击事件的方式来监听按钮点击,那我们来简单实现一个避免误触的方案
其中的核心原理就是点击事件的整个过程,总结来说就是下面的三个点击过程

  onPressOut={(event) => {const [startX, startY] = [event.nativeEvent.pageX,event.nativeEvent.pageY,];const currentTime = new Date().getTime();const shouldReject =(Math.abs(pressInPointRef.current.startX - startX) >pointDistance ||Math.abs(pressInPointRef.current.startY - startY) >pointDistance) &&(currentTime - pressInTime.current) < pointMinTimeSpace;console.log('shouldReject', shouldReject);shouldReject && event?.preventDefault?.();}}onPress={(event) => {if (event?.isDefaultPrevented?.()) return;onclick && onclick();}}onPressIn={(event) => {pressInPointRef.current.startX = event.nativeEvent.pageX;pressInPointRef.current.startY = event.nativeEvent.pageY;pressInTime.current = new Date().getTime();}}

当发生触摸时,通过onPressIn事件记录位置和获取事件戳,当指头触摸弹起时,通过onPressOut事件记录并且对比按下时的位置和按下时的时间,是否满足响应当前点击的条件,如果不满足响应,则使用event?.preventDefault?.()阻止其继续响应,最后根据onPress事件中if (event?.isDefaultPrevented?.()) return;判断该如何响应这次触摸点击,这就是整个过程。

  • pressInTime
    调整按压时间区间,在按下时和抬起间隔小于该时间,则认为是误触,这个和距离区间(pointDistance)一起确定是否误触

  • pointDistance
    调整按下和抬起时之间的距离,在按下时和抬起间隔小于该距离,则认为是误触,这个和按压时间(pressInTime)区间一起确定是否误触

  • 调整显示组件
    其中TouchableOpacity组件可以更换为能够响应点击事件的任何组件,下面是官方列出的被引用到的组件,都能够使用这种方式处理误触。

     ButtonPanResponderPressableScrollViewTextTextInputTouchableHighlightTouchableOpacityTouchableNativeFeedbackTouchableWithoutFeedbackView
    

针对以上情况,能够将其应用到业务不同的误触情况下,下面是整理之后,完整的代码,根据以上情况可以再次进行组件封装,适配自己业务组件的调整。

const App = () => {const list = Array.from(Array(100).keys());const pressInPointRef = useRef({ startX: 0, startY: 0 });const。pressInTime = useRef(0);const pointDistance = 100;const pointMinTimeSpace = 1000;const onclick = () => {console.log('按钮被点击...');alert('按钮被点击...')};return (<SafeAreaView style={styles.container}><ScrollView style={styles.scrollView}>{list.map((item) => {return (<TouchableOpacityonPressOut={(event) => {const [startX, startY] = [event.nativeEvent.pageX,event.nativeEvent.pageY,];const currentTime = new Date().getTime();const shouldReject =(Math.abs(pressInPointRef.current.startX - startX) >pointDistance ||Math.abs(pressInPointRef.current.startY - startY) >pointDistance) &&(currentTime - pressInTime.current) < pointMinTimeSpace;console.log('shouldReject', shouldReject);shouldReject && event?.preventDefault?.();}}onPress={(event) => {if (event?.isDefaultPrevented?.()) return;onclick && onclick();}}onPressIn={(event) => {pressInPointRef.current.startX = event.nativeEvent.pageX;pressInPointRef.current.startY = event.nativeEvent.pageY;pressInTime.current = new Date().getTime();}}><View style={styles.containerView}><Text style={styles.text}>{item}+ line</Text></View></TouchableOpacity>);})}</ScrollView></SafeAreaView>);
};

三、总结整理

  • 解决这次触摸,主要是使用点击事件本身的一个响应机制,在中间通过记录状态值的方式去处理
  • 使用到的方法涉及到按下时、抬起时、按下这三个过程
  • 通用功能组件需要进行封装,以达到业务功能上的适配

在这里插入图片描述

相关文章:

React Native中防止滑动过程中误触

React Native中防止滑动过程中误触 在使用React Native开发的时&#xff0c;当我们快速滑动应用的时候&#xff0c;可能会出现误触&#xff0c;导致我们会点击到页面中的某一些点击事件&#xff0c;误触导致页面元素响应从而进行其他操作,表现出非常不好的用户体验。 一、问题…...

【c语言】函数递归调用

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ…...

SPSS如何进行判别分析之案例实训?

文章目录 0.引言1.一般判别分析2.逐步判别分析3.决策树分析 0.引言 因科研等多场景需要进行绘图处理&#xff0c;笔者对SPSS进行了学习&#xff0c;本文通过《SPSS统计分析从入门到精通》及其配套素材结合网上相关资料进行学习笔记总结&#xff0c;本文对判别分析进行阐述。 1…...

Windows 10 字体模糊发虚的问题及解决方法

Windows 10字体模糊发虚! 如何解决?Windows 10是一款常见的操作系统&#xff0c;它拥有各种各样的功能&#xff0c;但是有些用户发现&#xff0c;在使用Windows 10时&#xff0c;字体会变得模糊发虚&#xff0c;这给用户带来了很多不便。下面&#xff0c;我们就来看看如何解决…...

渔人杯部分wp

文章目录 渔人杯神仙姐姐阿拉丁飘啊飘 渔人杯 神仙姐姐 点击拜 &#xff0c;抓包发现get请求了/sx.php 返回如下 {"code":0,"num":1,"flag":"ctfsh0w-f1ag-n0t-h3r3-th1s-msg-just-a-j0ke-}{"}在repeater重复请求&#xff0c;发现…...

测试用例覆盖不全面的解决方法

测试用例覆盖不全面的解决方法 问题分析 在测试用例设计过程中&#xff0c;容易出现思维受限或者需求盲区&#xff0c;我们不可能完全覆盖用户使用的所有场景&#xff0c;编写测试用例的时不可能把所有的场景都能想周全&#xff0c;把所有的场景下的情况都写成测试用例去模拟、…...

AWS Lambda - 第一部分

Hello大家好&#xff0c;我们今天开始讨论AWS Lambda的内容。 SAP认证考试会涉及到很多Lambda的内容&#xff0c;想要通过认证考试虽然不一定非要精通开发&#xff0c;但需要知道Lambda的一些功能和特性、适用场景以及Lambda是如何工作的。 我们开始吧&#xff01; Lambda与…...

Java 基础进阶篇(七)—— 面向对象三大特征之三:多态

文章目录 一、多态的概述二、多态中成员访问特点 ★三、多态的优势与劣势四、多态下的类型转换4.2 自动类型转换&#xff08;从子到父&#xff09;4.2 强制类型转换&#xff08;从父到子&#xff09;4.3 instanceof 关键字 一、多态的概述 多态&#xff1a;是指执行同一个行为…...

day9 实现UDP通信

目录 socket函数拓展 UDP通信实现过程 代码实现 socket函数拓展 send与recv函数&#xff1a; /*用于发送数据*/ ssize_t send(int sockfd, const void *buf, size_t len,int flags);/*用于接收数据*/ ssize_t recv(int sockfd, void *buf, size_t len,int flags);/*前三个…...

自然语言处理(NLP)在放射学报告评价中的应用:应用和技术进展

自然语言处理&#xff08;NLP&#xff09;在放射学报告评价中的应用&#xff1a;应用和技术进展 写在最前面摘要引言先进的技术BERT算法优点 Applications in Radiology 放射学应用Quality 质量将关键发现通知转诊临床医生放射科关键绩效指标和评估 个别放射科医生的表现同行学…...

日常开发为什么需要做Code Review

日常开发为什么需要做Code Review 一、背景 最近在开始一个新的项目&#xff0c;在查看项目中代码及具体细节时&#xff0c;发现这个项目真实一堆乱麻&#xff0c;没有规律可循&#xff0c;可总结下这个项目的缺陷 没有规律可循&#xff0c;没有结构性设计不做公共封装&#…...

OSPF的优化

O_ASE --- 标志域外路由信息 --- 因为域外的路由信息不可控性较强&#xff0c;所以&#xff0c;信任程度较低&#xff0c;我们将其优先级设置为150。 LSA --- 链路状态通告 --- OSPF协议在不同网络环境下产生的用于携带和传递不同的信息。 LSDB --- 链路状态数据库 SPF --- 最短…...

C++项目中打破循环依赖的锁链:实用方法大全

C项目中打破循环依赖的锁链 一、简介&#xff08;Introduction&#xff09;1.1 循环依赖的定义&#xff08;Definition of Circular Dependencies&#xff09;1.2 循环依赖带来的问题&#xff08;Problems Caused by Circular Dependencies&#xff09;1.3 解决循环依赖的重要性…...

IDEA连接HBase

新建maven工程 打开pom.xml添加hbase需要的依赖 <dependency><groupId>org.apache.hbase</groupId><artifactId>hbase-client</artifactId><version>2.3.5</version> </dependency><dependency><groupId>org.apa…...

Mask2Former来了!用于通用图像分割的 Masked-attention Mask Transformer

原理https://blog.csdn.net/bikahuli/article/details/121991697 源码解析 论文地址&#xff1a;http://arxiv.org/abs/2112.01527 项目地址&#xff1a;https://bowenc0221.github.io/mask2former Mask2Former的整体架构由三个组件组成&#xff1a; 主干特征提取器&#xff…...

【量化课程】01_投资与量化投资

文章目录 1.1 什么是投资1.1.1 经济意义上的投资1.1.2 投资的分类1.1.3 金融投资1.1.4 个人投资者投资品种1.1.5 投资VS投机 1.2 股票投资的基本流程1.3 常见的股票投资分析流派1.3.1 投资者分析流派 1.4 什么是量化投资1.4.1 量化投资基本概念1.4.2 量化投资的优势1.4.3 量化投…...

SpringBoot实现导出Excel功能

1 问题背景 需求要做一个导出excel的功能 2 前言 本篇着重阐述后端怎么实现&#xff0c;前端实现的部分只会粗略阐述。该实现方案是经过生产环境考验的&#xff0c;不是那些拿来练手的小demo。本文阐述的方案可以借鉴用来做毕设或者加到自己玩的项目中去。再次声明&#xff0c;…...

NSSCTF之Misc篇刷题记录⑧

NSSCTF之Misc篇刷题记录 [MMACTF 2015]welcome[广东强网杯 2021 团队组]欢迎参加强网杯[虎符CTF 2022]Plain Text[SWPUCTF 2021 新生赛]原来你也玩原神[SWPUCTF 2021 新生赛]我flag呢&#xff1f;[鹤城杯 2021]New MISC NSSCTF平台&#xff1a;https://www.nssctf.cn/ PS&…...

从零开始学习Linux运维,成为IT领域翘楚(七)

文章目录 &#x1f525;Linux下常用软件安装_JDK和Tomcat安装&#x1f525;Linux下常用软件安装_MySQL安装&#x1f525;Linux下常用软件安装_MySQL卸载 &#x1f525;Linux下常用软件安装_JDK和Tomcat安装 Jdk 安装 解压jdk安装包 tar -zxvf jdk-8u201-linux-x64.tar.gz -C/…...

优漫动游设计APP的UI界面需要注意哪些问题?

一、加载   加载时间的长短&#xff0c;很大程度的决定了用户体验是否有所提升&#xff0c;虽然理想中的页面加载出来应该一秒就够了&#xff0c;但是设计师不要忽略网络问题!如果网速不够的话&#xff0c;页面加载三五秒都算是快的了&#xff0c;所以在用户等待的过程中&a…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...