react-native当点击TouchableOpacity时，要点击两下才会触发onPress解决办法

最新推荐文章于 2023-03-26 17:12:37 发布
最新推荐文章于 2023-03-26 17:12:37 发布
阅读量8.3k 收藏 1
点赞数 2
文章标签： react-native iOS error TouchableOpacity onPress
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013751625/article/details/52840070
版权

将TouchableOpacity加入到一个scrollView里面然后，scrollView添加属性keyboardShouldPersistTaps属性值设为true，这样就可以只点击一次就能触发onPress了

查到的资料是来自https://stackoverflow.com/questions/34290787/touchableopacity-as-item-in-listview-only-reacts-after-textinput-has-lost-focus大笑大笑大笑,ListView也有效

曾梦轩
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-native-rename：仅用一个命令即可重命名react-native应用
01-30
react-native-rename 只需一个命令即可重命名react-native应用 该软件包假定您使用react-native init创建了react-native项目。 注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 ...
React Native Web 安卓h5 Touchable onPress 触发两次问题解决
zwkkkk1的博客
12-24 1111
在维护基于 React Native Web 的 h5 项目时，遇到这样的一个 bug，在部分安卓 h5 页面一些点击事件会稳定触发两边，这样的问题在 iOS 和 pc 调试 h5 都是好的，甚至同一机型只要另外换一个浏览器可能也会有不同的效果。 在调试阶段，发现只要把 TouchableHighlight 等组件都干掉，换成 div，点击事件也从 onPress 改到 onClick，就全部是好...
react native TextInput 键盘弹起点击两次才能触发子组件解决方案
移动开发技术分享
11-14 2841
关于react native TextInput 键盘弹起点击两次才能触发子组件解决方案： 1. TextInput组件用ScrollView或FlatList组件包裹，给ScrollView或FlatList组件添加如下属性： keyboardShouldPersistTaps="handled" 'handled'，当点击事件被子组件捕获时，键盘不会自动收起。这样切换TextInpu...
react-native点击按钮不让键盘自动收起键盘的方法，解决点击按钮需要两次的问题
一生为追梦的博客
10-11 2361
在使用滚轮插件时，如ScrollView、KeyboardAwareScrollView等待，会出现点击该页面的按钮需要点两次才能触发。 使用keyboardShouldPersistTaps={true}方法即可。 代码如下： <KeyboardAwareScrollView style={{flex: 1}}> 改为 <KeyboardAwareScrollVi...
React Native TouchableOpacity 封装 防止快速点击 多次响应
xxlyzgt的博客
07-12 3688
不耽误干活，直接上代码，功能比较简单，具体延时时间自己定，还需要啥功能自己改进一下。   import React,{ Component } from "react"; import {TouchableOpacity, View} from "react-native"; class Button extends React.Component&lt;ButtonProps, any&...
React Native 软键盘存在TextInput，输入框有焦点情况下需要点击两次才可触发事件-解决
m0_37192193的博客
06-02 1302
在外层 添加ScrollView，增加属性。 keyboardShouldPersistTaps={'handled'} <ScrollView keyboardShouldPersistTaps={'handled'} contentContainerStyle={{height: '100%'}}> <View> <TextInput ..../> </View> </ScrollView> 就可以解决问题。 如果使用 属性为alw
解决React Native 键盘弹起时第一次点击确定按钮没反应
baihailing的博客
04-09 3186
做项目的时候遇到一个问题：键盘弹起时，点击确定按钮没响应，键盘收起了，再点击确定按钮才有响应。网上看了相关文档，包括： https://blog.csdn.net/weixin_33729196/article/details/87450454 https://www.cnblogs.com/huangjialin/p/6211601.html 以上两种方法讲得都是隐藏键盘，经实践发现没有反...
React Native 小记 - TouchableOpacity 单次点击无效
weixin_34220834的博客
10-23 1190
一般是焦点问题，解决方法：即在 ScrollView 标签内，根据情况设置其 keyboardShouldPersistTaps 属性值为 always 或者 handled 。详细解决过程如下： 0x00 描述 收到测试人员提交的 Bug：帐号密码输入完毕按返回键关闭键盘后，点击登录没反应，再点一次才执行登录操作。网上类似的情况还有 “当点击 TouchableOpacity 时，要点击两下才会...
React Native用onPress实现单击/双击
weixin_40920751的博客
10-21 902
React Native用onPress实现单击/双击 onPress={() => { this.clickTimes = this.clickTimes || 0; this.douClickTimeOut && clearTimeout(this.douClickTimeOut); ++this.clickTimes; this.douClickTimeOut = setTimeout(() => { console.log(this.clickTi
react native双击事件实现
L_I_S的博客
04-14 1942
使用背景 看上去很简单的一个需求，找了几遍RN的文档并没有说明双击事件。没有办法只能自己手动实现 代码 这个是handler的写法 const followMedia = (() => { let times = 0; let timer = null; // 模仿双击事件 return () => { clearTimeout(tim...
Android onTouch 点击事件执行两次分析
afunyusong的专栏
08-11 2433
Android onTouch 点击事件执行两次分析
react-native-iap：应用内购买的react-native本机模块
02-03
请记住， react-native-iap将提供您需要的基本功能，但不是一站式解决方案，在您的应用中实施应用内购买仍需要大量工作。 同样，实现客户端只是硬币的一面，您必须实现服务器端才能验证收据（正确完成收据可能是最...
react-native-image-to-pdf:react-native插件可将图像转换为PDF
05-26
入门$ npm install react-native-image-to-pdf --save 或者$ yarn add react-native-image-to-pdf 大多是自动安装$ react-native link react-native-image-to-pdf 手动安装的iOS 在XCode的项目导航器中，右键单击“ ...
react-native-qrcode-svg：基于react-native-svg和node-qrcode的React Native QR码生成器
02-05
讨论： ： 产品特点轻松渲染QR码图像（可选）嵌入徽标安卓的iOS安装安装依赖包yarn add react-native-svg react-native-qrcode-svg 要么npm i -S react-native-svg react-native-qrcode-svg 如果您使用的是React ...
react-native-web-linear-gradient:用于Web实现React-native-linear-gradient的React Native
05-17
react-native-web-linear-gradient 用于Web实现React-native-linear-gradient的React Native 入门 $ npm install react-native-web-linear-gradient --save 别名打包您的webpack配置中： resolve: { alias: { ...
initrd&init进程
懒猫的脚印
03-26 2034
initrd的全名是init ramdisk，是一个启动时存在于内存的文件系统。init是Linux的第一个进程
2014年311教育学专业基础综合答案解析.pdf
04-24
教育学考研，考研真题，全国硕士研究生统一考试教育学专业基础综合真题及解析，311历年真题，参考答案，答案解析。教育学统考。
大语言模型安全测试方法
04-24
4月16日联合国日内瓦总部万国宫，由世界数字技术院（WDTA）与云安全联盟大中华区（CSA GCR）联合主办第27届联合国科技大会AI边会上，世界数字技术院（WDTA）发布了两项具有重要意义的国际标准：“生成式人工智能应用安全测试标准”和“大语言模型安全测试方法”。这是国际组织首次在生成式AI应用安全、大模型安全领域发布国际标准，为业界提供了统一的测试框架，标准的发布将对人工智能领域产生深远影响，推动人工智能技术的安全、可靠发展。 这两大标准由云安全联盟大中华区研究院副院长黄连金带领的专家团队编制而成，他们来自CSA大中华区、OpenAI、蚂蚁集团、谷歌、微软、亚马逊、英伟达、OPPO、科大讯飞、百度、腾讯、加州大学伯克利分校、芝加哥大学、香港科技大学等数十家单位，体现了业界的广泛协作与集体智慧。 云安全联盟大中华区主席、世界数字技术院执行理事长李雨航院士发布时介绍，“生成式人工智能应用安全测试标准”为测试和验证生成式AI应用的安全性提供了一个框架，特别是那些使用大语言模型构建的应用程序。它定义了人工智能应用程序架构每一层的测试和验证范围，确保AI应用各个方面都经过严格的安全性和合规性
基于ssm电商网站的设计与实现(部署视频)_kaic.zip
最新发布
04-24
目 录 目 录 1 绪论 1.1 研究背景 1.2 目的和意义 1.3 论文结构安排 2 相关技术 2.1 SSM框架介绍 2.2 B/S结构介绍 2.3 MYSQL数据库介绍 3 系统分析 3.1 系统可行性分析 3.1.1 技术可行性分析 3.1.2 经济可行性分析 3.1.3 运行可行性分析 3.2 系统性能分析 3.2.1 易用性指标 3.2.2 可扩展性指标 3.2.3 健壮性指标 3.2.4 安全性指标 3.3 系统流程分析 3.3.1 操作流程分析 3.3.2 登录流程分析 3.3.3 信息添加流程分析 3.3.4 信息删除流程分析 4 系统设计 4.1 系统概要设计 4.2 系统功能结构设计 4.3 数据库设计 4.3.1 数据库E-R图设计 4.3.2 数据库表结构设计 5 系统实现 5.1用户信息管理 5.2 商品信息管理 5.3商品分类管理 5.1商品资讯管理 6 系统测试 6.1 系统测试的特点  6.2 系统功能测试 6.2.1 登录功能测试 6.2.2 添加类别功能测试 6.3 测试结果分析 结 论 致 谢 参考文献
React-Native 点击屏幕其他地方，让TextInput失去焦点
05-24
可以通过在TouchableWithoutFeedback组件中包裹TextInput，并在onPress事件中调用TextInput的blur()方法来实现点击屏幕其他地方让TextInput失去焦点的效果。示例代码如下： ```jsx import React, { useRef } from 'react'; import { TouchableWithoutFeedback, TextInput } from 'react-native'; const MyComponent = () => { const inputRef = useRef(null); return ( <TouchableWithoutFeedback onPress={() => inputRef.current?.blur()}> <TextInput ref={inputRef} /> </TouchableWithoutFeedback> ); }; export default MyComponent; ``` 在上面的代码中，我们创建了一个名为MyComponent的组件，在组件中使用了TouchableWithoutFeedback组件包裹了一个TextInput组件，并将TextInput的引用传递给了一个名为inputRef的useRef钩子。当用户点击屏幕其他地方时，会触发TouchableWithoutFeedback的onPress事件，并在事件处理函数中调用TextInput的blur()方法，从而让TextInput失去焦点。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值