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

最新推荐文章于 2024-02-06 16:11:51 发布
最新推荐文章于 2024-02-06 16:11:51 发布
阅读量1.3k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 混合开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_21937107/article/details/84872834
在ScrollView中使用TouchableOpacity时遇到点击两次才能触发onPress的问题，可以通过设置ScrollView的keyboardShouldPersistTaps属性为'true'来解决。参考自StackOverflow，此解决方案同样适用于ListView。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

react-native入门之处理触摸事件
蛐蛐的博客
04-05 759
文档：https://reactnative.cn/docs/handling-touches 1.简介 移动应用上的用户交互基本靠“摸”。当然，“摸”也是有各种姿势的：在一个按钮上点击，在一个列表上滑动，或是在一个地图上缩放。 React Native 提供了可以处理常见触摸手势（例如点击或滑动）的组件， 以及可用于识别更复杂的手势的完整的手势响应系统。 2.按钮 Button是一个简单的跨平台的按钮组件。一般用于处理点击事件 <Button onPress...
解决React Native 键盘弹起时第一次点击确定按钮没反应
baihailing的博客
04-09 3493
做项目的时候遇到一个问题：键盘弹起时，点击确定按钮没响应，键盘收起了，再点击确定按钮才有响应。网上看了相关文档，包括： https://blog.youkuaiyun.com/weixin_33729196/article/details/87450454 https://www.cnblogs.com/huangjialin/p/6211601.html 以上两种方法讲得都是隐藏键盘，经实践发现没有反...
React Native 小记 - TouchableOpacity 单次点击无效
weixin_34220834的博客
10-23 1316
一般是焦点问题，解决方法：即在 ScrollView 标签内，根据情况设置其 keyboardShouldPersistTaps 属性值为 always 或者 handled 。详细解决过程如下： 0x00 描述 收到测试人员提交的 Bug：帐号密码输入完毕按返回键关闭键盘后，点击登录没反应，再点一次才执行登录操作。网上类似的情况还有 “当点击 TouchableOpacity 时，要点击两下才会...
React Native之弹框存在TextInput，输入框有焦点情况下需要点击两次才可触发事件-解决
热门推荐
spicyboiledfish的博客
04-19 2万+
Bug情况描述：React Native项目中，点击按钮A出现弹框浮层，弹框中需要TextInput输入数字，键盘浮起来；这时候点击 取消按钮L 或者 确定按钮R，只是让键盘收起，但是并没有触发 取消 或 确定 的事件，必须要再点击第二次才可以触发。另外，当输入框有焦点的情况下，点击 屏幕任意位置（除了键盘），可使键盘收起隐藏； 期待效果：当输入框输完数字后，光标焦点仍然存在，键盘也未消失，这时
React Native 软键盘存在TextInput，输入框有焦点情况下需要点击两次才可触发事件-解决
m0_37192193的博客
06-02 1533
在外层 添加ScrollView，增加属性。 keyboardShouldPersistTaps={'handled'} <ScrollView keyboardShouldPersistTaps={'handled'} contentContainerStyle={{height: '100%'}}> <View> <TextInput ..../> </View> </ScrollView> 就可以解决问题。 如果使用 属性为alw
react native TextInput 键盘弹起点击两次才能触发子组件解决方案
移动开发技术分享
11-14 3080
关于react native TextInput 键盘弹起点击两次才能触发子组件解决方案： 1. TextInput组件用ScrollView或FlatList组件包裹，给ScrollView或FlatList组件添加如下属性： keyboardShouldPersistTaps="handled" 'handled'，当点击事件被子组件捕获时，键盘不会自动收起。这样切换TextInpu...
【React Native 小记】解决嵌套内的 TouchableHighlight、TouchableOpacity 等组件onPress误触发
李华明Himi
06-04 1756
当前使用RN版本号:0.62.2 ，此版本中，对于使用react-native-scrollable-tab-view 、react-native-swiper等组件嵌套View中使用TouchableHighlight、TouchableOpacity 、TouchableNativeFeedback等时，会出现其 onPress 误触发的情况。 这里举例说明一下问题，看下面测试代码与执行效果： import React from 'react'; import...
react-native-maps-demo：react-native-maps-demo
02-17
5. **交互性**：地图组件支持多种交互事件，如`onPress`、`onRegionChange`等，这使得开发者可以响应用户的地图操作，例如当用户点击地图时触发一个函数。 6. **自定义样式**：你可以通过`style`属性调整地图容器的...
react-native-image-picker 的使用方法demo
08-17
React Native 是一个强大的框架，它允许开发者使用JavaScript和React语法构建原生移动应用程序。`react-native-image-picker` 是一个流行的React Native库，用于在iOS和Android应用中集成图像选择功能，包括从相册...
RN解决在ScrollView中用多个TextInput两次点击问题
huhao0829的博客
11-10 2302
解决在ScrollView中用多个TextInput两次点击问题在ScrollView中存在两个TextInput时，当第一个被focus时，想切换到第二个时，需要点击两次才能被focus1. keyboardShouldPersistTaps 的使用这是ScrollView的一个属性，当此属性为false的时候，在软键盘激活之后，点击焦点文本输入框以外的地方，键盘就会隐藏。如果为true，滚动视图
解决React Native中ScrollView中控件获得焦点及点击空白处键盘消失的问题
淡淡的幸福的博客
01-24 1万+
大家好，今天讲下在开发RN过程中使用ScrollView控件出现的问题。 最初的开发需求是显示一个界面，这个界面有两个特点: 1)纵向很长，显示的内容有点多 2)界面的下半部分中有TextInput控件 要想满足第一个条件，首先想到的是将显示的这些内容最外层加上一层ScrollView控件包裹，经过测试，确实是可以的。 TextInput控件后面根了一个删除按钮，删除按钮
【react native】ScrollView的触摸事件与TouchableWithoutFeedback的点击事件冲突
最新发布
坚强的泡沫的博客
02-06 2180
【react native】ScrollView的触摸事件与TouchableWithoutFeedback的点击时间冲突
React Native TouchableOpacity 封装 防止快速点击 多次响应
xxlyzgt的博客
07-12 3792
不耽误干活，直接上代码，功能比较简单，具体延时时间自己定，还需要啥功能自己改进一下。   import React,{ Component } from "react"; import {TouchableOpacity, View} from "react-native"; class Button extends React.Component&lt;ButtonProps, any&...
React Native点击
新世界后半段
10-09 1845
React Native 中的点击事件React Native中Text组件有点击事件其他还没有碰见自带点击事件的， 一般用Touchable..来做点击 TouchableHighlight 点击会有点击背景颜色 TouchableOpacity 点击会有一个渐变透明的效果 TouchableWithoutFeedback 毫无效果和Text的onPress一样 上面三个组件中的点击方法有四
Touchable系列组件
08-11 1460
学习资料 博客:Touchable系列组件 TouchableHighlight、TouchableOpacity/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react'; import { Ap
RN点击事件的使用
Code Store
06-20 5717
在RN中，相应事件都是通过都是通过TouchableOpacity处理的 技术要点： 1）响应事件方式 TouchableOpacity来处理的，2）状态机getDefaultProps 是用来取值的，取用来不可以改变的值，只想当于getgetInitialState 是用来设置值的，相当于set，get import React, { Component } from 'reac
react-native点击按钮不让键盘自动收起键盘的方法，解决点击按钮需要两次的问题
一生为追梦的博客
10-11 2722
在使用滚轮插件时，如ScrollView、KeyboardAwareScrollView等待，会出现点击该页面的按钮需要点两次才能触发。 使用keyboardShouldPersistTaps={true}方法即可。 代码如下： <KeyboardAwareScrollView style={{flex: 1}}> 改为 <KeyboardAwareScrollVi...
RN 遇到了哪些坑
hzxOnlineOk的博客
06-05 976
1、Image组件： overlayColor 当图片有圆角的时候，指定一个颜色用于填充圆角处的空白。虽然一般情况下圆角处是透明的，但在某些情况下，Android 并不支持圆角透明，比如： 某些 resize 模式比如'contain' GIF 动画 常见的用法就是在不能圆角透明时，设置overlayColor和背景色一致。 ...
React Native iOS14颜色选择器模块：react-native-color-picker-ios
另外，通过`TouchableOpacity`组件包裹了`View`和`Text`组件，当用户点击时会触发颜色选择。 ### 知识点七：Hacktoberfest Hacktoberfest是一个由DigitalOcean赞助的年度活动，旨在鼓励人们参与开源项目。这个活动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

烈焰晴天

你的鼓励就是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值