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

【react native】ScrollView的触摸事件与TouchableWithoutFeedback的点击事件冲突

需求背景

使用 ScrollView 组件实现轮播图效果,该轮播图可以自动向右滑动。有下面两个需求:

(1)希望用户左右点击的时候,视图可以向左/向右滚动;

(2)希望用户触摸在屏幕的时候,轮播图不自动滚动,放开的时候重新计时5秒后向右滚动;

(3)在轮播视图内有一个按钮,希望我们在点击按钮并弹出弹窗的时候,轮播图停止计时,弹窗关闭后再重新计时。

需求分析

(1)我们可以使用 TouchableWithoutFeedback 组件,分别覆盖左右视图,当触发onPress的时候进行翻页。

(2)可以使用 ScrollViewonTouchStartonTouchEnd 事件,分别表示触摸开始和触摸结束时候的回调。

(3)事件的回调顺序是: onTouchStart > onPress > onTouchEnd ,所以下面的这种写法会导致,当点击share按钮的时候,打印如下:

onTouchStart
click button, start to stop timer
onTouchEnd
// 执行完异步操作后会打印
start to start timer

但我们希望的是,能够打印如下:

onTouchStart
click button, start to stop timer
// onTouchEnd 不打印
// 执行完异步操作后会打印
start to start timer
state = {scrollViewTouchable: true,
};handleSharePress = async() => {// 停止定时器console.log('click button, start to stop timer');this.handleStopTimer();// 处理 "Share" 按钮的逻辑// await ....// 打开定时器console.log('start to start timer');this.handleStartTimer();
};render() {const { scrollViewTouchable } = this.state;return (<View><ScrollViewonTouchStart={scrollViewTouchable ? ()=>{this.handleStartTimer(); console.log('onTouchStart')} : undefined}onTouchEnd={scrollViewTouchable ? ()=>{this.handleStopTimer(); console.log('onTouchEnd')} : undefined}// 其他属性...>{/* ScrollView 内容 */}<TouchableOpacityonPress={this.handleSharePress}><View style={styles.shareButton}>{/* Share 按钮内容 */}</View></TouchableOpacity></ScrollView></View>);
}

解决方法

通过阻止默认事件的方式好像不能解决上述问题,因为 TouchableWithoutFeedback 组件不会阻止事件冒泡到父组件。

所以我们考虑用一个state变量来控制 ScrollView 组件的触摸事件是否可用。在点击 “Share” 按钮时,将状态变量设置为 false,在 onPress 事件完成后,将状态变量设置回 true。

state = {scrollViewTouchable: true,
};handleSharePress = async() => {this.setState({ scrollViewTouchable: false });// 处理 "Share" 按钮的逻辑// await...this.setState({ scrollViewTouchable: true });
};render() {const { scrollViewTouchable } = this.state;return (<View><ScrollViewonTouchStart={scrollViewTouchable ? this.handleStartTimer : undefined}onTouchEnd={scrollViewTouchable ? this.handleStopTimer : undefined}// 其他属性...>{/* ScrollView 内容 */}<TouchableOpacityonPress={this.handleSharePress}><View style={styles.shareButton}>{/* Share 按钮内容 */}</View></TouchableOpacity></ScrollView></View>);
}

相关文章:

【react native】ScrollView的触摸事件与TouchableWithoutFeedback的点击事件冲突

需求背景 使用 ScrollView 组件实现轮播图效果&#xff0c;该轮播图可以自动向右滑动。有下面两个需求&#xff1a; &#xff08;1&#xff09;希望用户左右点击的时候&#xff0c;视图可以向左/向右滚动&#xff1b; &#xff08;2&#xff09;希望用户触摸在屏幕的时候&am…...

鸿蒙内核框架

1 内核概述 内核简介 用户最常见到并与之交互的操作系统界面&#xff0c;其实只是操作系统最外面的一层。操作系统最重要的任务&#xff0c;包括管理硬件设备&#xff0c;分配系统资源等&#xff0c;我们称之为操作系统内在最重要的核心功能。而实现这些核心功能的操作系统模…...

幻兽帕鲁专用服务器,多人游戏(专用服务器)搭建

玩转幻兽帕鲁服务器&#xff0c;阿里云推出新手0基础一键部署幻兽帕鲁服务器教程&#xff0c;傻瓜式一键部署&#xff0c;3分钟即可成功创建一台Palworld专属服务器&#xff0c;成本仅需26元&#xff0c;阿里云服务器网aliyunfuwuqi.com分享2024年新版基于阿里云搭建幻兽帕鲁服…...

7000字详解Spring Boot项目集成RabbitMQ实战以及坑点分析

本文给大家介绍一下在 Spring Boot 项目中如何集成消息队列 RabbitMQ&#xff0c;包含对 RibbitMQ 的架构介绍、应用场景、坑点解析以及代码实战。 我将使用 waynboot-mall 项目作为代码讲解&#xff0c;项目地址&#xff1a;https://github.com/wayn111/waynboot-mall。本文大…...

AJAX-认识URL

定义 概念&#xff1a;URL就是统一资源定位符&#xff0c;简称网址&#xff0c;用于访问网络上的资源 组成 协议 http协议&#xff1a;超文本传输协议&#xff0c;规定浏览器和服务器之间传输数据的格式&#xff1b;规定了浏览器发送及服务器返回内容的格式 协议范围&#xf…...

国图公考:公务员面试资格复审需要准备什么?

参加国考面试的考生在资格审核阶段需要准备以下材料&#xff1a; 1、本人身份证、学生证或工作证复印件。 2、公共科目笔试准考证复印件。 3、考试报名登记表。 4、本(专)科、研究生各阶段学历、学位证书(应届毕业生没有可以暂时不提供)。 5、报名资料上填写的各类证书材料…...

爬虫实战--人民网

文章目录 前言发现宝藏 前言 为了巩固所学的知识&#xff0c;作者尝试着开始发布一些学习笔记类的博客&#xff0c;方便日后回顾。当然&#xff0c;如果能帮到一些萌新进行新技术的学习那也是极好的。作者菜菜一枚&#xff0c;文章中如果有记录错误&#xff0c;欢迎读者朋友们…...

【Arduino】LGT8F328 UNO R3编译上传

LGT8F328 UNO R3编译上传 示例代码 这是一段示例代码&#xff0c;将示例代码编译打包上传到LGT8F328 UNO R3开发板。 #include <Servo.h> Servo myservo; int pos 0; void setup() {// put your setup code here, to run once:Serial.begin(9600);Serial.println(&qu…...

Python进阶----在线翻译器(Python3的百度翻译爬虫)

目录 一、此处需要安装第三方库requests: 二、抓包分析及编写Python代码 1、打开百度翻译的官网进行抓包分析。 2、编写请求模块 3、输出我们想要的消息 三、所有代码如下&#xff1a; 一、此处需要安装第三方库requests: 在Pycharm平台终端或者命令提示符窗口中输入以下代…...

ArcGISPro中Python相关命令总结

主要总结conda方面的相关命令 列出当前活动环境中的包 conda list 列出所有 conda 环境 conda env list 克隆环境 克隆以默认的 arcgispro-py3 环境为模版的 my_env 新环境。 conda create --clone arcgispro-py3 --name my_env --pinned 激活环境 activate my_env p…...

2024年混合云:趋势和预测

混合云环境对于 DevOps 团队变得越来越重要&#xff0c;主要是因为它们能够弥合公共云资源的快速部署与私有云基础设施的安全和控制之间的差距。这种环境的混合为 DevOps 团队提供了灵活性和可扩展性&#xff0c;这对于大型企业中的持续集成和持续部署 (CI/CD) 至关重要。 在混…...

c++入门学习④——对象的初始化和清理

目录 对象的初始化和清理&#xff1a; why? 如何进行初始化和清理呢&#xff1f; 使用构造函数和析构函数​编辑 构造函数语法: 析构函数语法: 构造函数的分类&#xff1a; 两种分类方式&#xff1a; 三种调用方法&#xff1a; 括号法&#xff08;默认构造函数调用&…...

Java-spring注解的作用

1.Qualifier&#xff1a;通常与Autowired搭配使用&#xff0c;通过指定具体的beanName来注入相应的bean 当容器中有多个类型相同的Bean时&#xff0c;可以使用Qualifier注解来指定需要注入的Bean。Qualifier注解可以用于字段、方法参数、构造函数参数等位置 Service public cl…...

Allegro如何把Symbols,shapes,vias,Clines,Cline segs等多种元素一起移动

Allegro如何把Symbols,shapes,vias,Clines,Cline segs等多种元素一起移动 在用Allegro进行PCB设计时,有时候需要同时移动某个区域的所有元素,如:Symbols,shapes,vias,Clines,Cline segs等元素。那么如何操作呢? 首先就是把Symbols,shapes,vias,Clines,Cline …...

【力扣】罗马数字转整数,哈希集合+模拟

罗马数字转整数原题地址 方法一&#xff1a;模拟 罗马数字是字符串&#xff0c;其中每个字符都对应一个整数值&#xff0c;为了方便查找&#xff0c;可以预先把这种对应关系存储到哈希表中。 遍历字符串&#xff0c;对于每个字符&#xff0c; 如果该字符不是最右边的字符&a…...

从长网址到短链接:探索网址缩短的神奇世界

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 从长网址到短链接&#xff1a;探索网址缩短的神奇世界 前言网址缩短的原理和历史网址缩短的应用场景网址缩短的安全风险网址缩短的未来趋势 前言 你是否曾经在浏览网页或社交媒体时遇到过一串看起来像…...

Micro micro controller一览

https://www.microchip.com.cn/&#xff0c; Microchip中文网站 https://www.microchip.com.cn/newcommunity/index.php?mSearch&adosearch&moduleDownload&keyworddsPIC33&p3 Microcontrollers and microProcessors dsPIC33 Digital Signal Controllers (D…...

一文简介Maven初级使用

一.概述 Maven是专门用于管理和构建Java项目的工具&#xff0c;它的主要功能有&#xff1a; 提供了一套标准化的项目结构提供了一套标准化的项目构建流程&#xff08;编译&#xff0c;测试&#xff0c;打包&#xff0c;发布&#xff09;提供了一套依赖管理机制 一方面&…...

Django的配置文件setting.py

BASE_DIR 项目路径&#xff1a;默认是已经打开的主项目路径 ​​​​​​​BASE_DIR os.path.dirname(os.path.dirname(os.path.abspath(__file__))) SECRET_KEY 密钥 SECRET_KEY (dh&_fm2hfn9y)35!_6#$a7q%%^onoy#-a8x18r4(6*8f(aniDEBUG 帮助调试&#xff0c;默认…...

2024-02-06(Sqoop)

1.Sqoop Apache Sqoop是Hadoop生态体系和RDBMS&#xff08;关系型数据库&#xff09;体系之间传递数据的一种工具。 Sqoop工作机制是将导入或者导出命令翻译成MapReduce程序来实现。在翻译出的MapReduce中主要是对inputformat和outputformat进行定制。 Hadoop生态包括&#…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...