RN，react-native View在Android不响应触摸事件

最新推荐文章于 2021-12-20 10:27:27 发布
最新推荐文章于 2021-12-20 10:27:27 发布
阅读量2.8k 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： RN踩坑之旅 文章标签： RN react-native Android 手势无响应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gongziwushuang/article/details/87290947
本文探讨了React Native中View组件在Android平台不响应触摸事件的问题。在iOS上正常的手势监听，在Android上却失效，文章指出通过给View设置透明背景色可以解决此问题。

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

RN，react-native View在Android不响应触摸事件

在用RN开发时，按照官方文档 对View设置手势监听时，在IOS上正常响应，在Android上却无响应，此时给View设置背景色即可正常响应手势操作。

	backgroundColor:'transparent'
Android各类View触摸监听器失效
m0_57150356的博客
11-11 462
位置靠后定义的View会覆盖住位置靠前的View；即靠后的View会拦截触碰事件导致靠前的View无法收到触碰事件，无法触发监听器。
UITouch事件不响应的解决方案
City_Night的专栏
03-17 1155
在开发中遇到了这样一个问题：为什么我写的touchesBegan方法没有执行呢？怎么解决呢？ 我查找了一下原因：UI Scroll View拦截了UI View的事件。解决办法就是让事件传递过去。具体解决方案：加一个UIScrollView的category。使每个用到UIScrollView的地方只要导入这个category就可以直接响应相关的touch事件了。#import "UIScrollV
WebView Touch事件总结
u013368661的专栏
02-09 951
WebView Touch事件总结 通过VIew的dispatchTouchEvent(MotionEvent event)函数调用子类 WebView::OnTouchEvent(MotionEvent); 调用 WebViewClassic::onTouchEvent(MotionEvent ev) （在这里你可以做些自己想做的事情，比如if (ev.getAction() ==
React Native设置 TouchableOpacity 禁用
mingxiangzhimin的博客
10-26 3279
设置按钮 禁止点击 https://www.jianshu.com/p/99cd45336849
React Native安卓应用调试填坑记录
flyingpig2016的博客
08-07 2172
一：遇到问题：Android 真机无法运行，模拟器可正常运行 运行react-native run-android ，模拟器正常运行，用的（魅族手机）却不能运行，报错：React Native 之 com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException； 然后通过博文react踩坑记录，
android用webview加载H5页面出现点击事件失效的问题解决
热门推荐
milli236的博客
08-03 1万+
不论点击还是标签链接都失效，反复查阅，可能性方法试了又试最终解决。总结下：1.开启js支持2.webview 设置WebChromeClient3.websetting和webviewclient import android.os.Bundle; import android.annotation.SuppressLint; import android.app.Activity; impor
RN TouchableOpacity点击事件不响应原因详解
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
12-20 3402
问题 首先是整个页面布局如上： 在实际开发中发现 如下红框中的所有区域点击事件均没有效果，不会触发 问题定位 RN基本触摸组件尝试 TouchableHighlight、TouchableNativeFeedback、 TouchableOpacity 、 TouchableWithoutFeedback onPressIn：点击开始； onPressOut：点击结束或者离开； onPress：单击事件回调； onLongPress：长按事件回调。 以上触摸事件无论怎么尝试在红框区域
rn中点击事件失效
micotale的博客
11-28 2736
之前同事做一个rn项目，所有的逻辑都ok，唯独点击事件在ios上ok,  在Android机上失效。   各种排查，终于找到原因。   不难，就不卖关子了。   就是承载rn界面的必须继承 DefaultHardwareBackBtnHandler，这个实际上就是连接native和rn的handler桥梁。   然后复写对应的方法   重新打包即可  ...
RN（react native）入坑指南-07,使用navigator实现页面跳转
如是我闻
04-18 1万+
前言　　此文完全参考React-Native中文社区的博客新手理解navigator的教程而来,建议直接跳转链接进行详细学习,为防止链接失效或不可抗力因素无法访问,个人整理简单记录如下.开始由于前一篇文章将代码进行了分层整理,所以我们的index.android.js已经变得相对简洁 index.android.js'use strict';import React,{Navigator,AppR
react native Button点击不响应
saxihuangxing的博客
08-26 1595
开发框架： react native 0.63 开发工具： IDEA 调试设备 android 手机 6.0 用IDEA 运行 debug android android 后，出现Button点击没反应，也没有点击的声音，返回键也不能响应。刚开始还怀疑是react native框架的原因 或者哪里没有配置好。后来发现每次直接用 IDEA 跑起来的调试程序都没法响应按键 ，只有把程序进程干掉，再重新进来就能响应点击了！ ...
RN点击事件的使用
Code Store
06-20 5717
在RN中，相应事件都是通过都是通过TouchableOpacity处理的 技术要点： 1）响应事件方式 TouchableOpacity来处理的，2）状态机getDefaultProps 是用来取值的，取用来不可以改变的值，只想当于getgetInitialState 是用来设置值的，相当于set，get import React, { Component } from 'reac
react-native点击事件
weixin_30437847的博客
09-25 1413
点击事件 <View> <Button title="点击事件" onPress={this._onPressButton.bind(this)}/></View> _onPressButton() { alert('点击事件亦被促发');} 转载于:https://www.cnblogs.com/boonook/p/9704317.html...
ReactNative:点击按钮添加view
book_1992的专栏
07-13 2533
ReactNative
RN与原生交互（一）——基本页面跳转
weixin_33920401的博客
06-13 1262
React Native(以下简称RN)开发app过程中大部分都可以在JS端完成，但是也有一些功能是需要原生端来完成的。这时RN与原生端就不可避免的需要进行交互，比如页面跳转和数据传递。本篇文章主要以RN——原生、原生——RN——原生为例来讲解如何进行基本的页面跳转操作。 关于页面跳转，我写了三个demo。这里发下地址： RNAddNative RNPushToNative NativeJump...
React Native点击
新世界后半段
10-09 1845
React Native 中的点击事件React Native中Text组件有点击事件其他还没有碰见自带点击事件的， 一般用Touchable..来做点击 TouchableHighlight 点击会有点击背景颜色 TouchableOpacity 点击会有一个渐变透明的效果 TouchableWithoutFeedback 毫无效果和Text的onPress一样 上面三个组件中的点击方法有四
解决React Native 键盘弹起时第一次点击确定按钮没反应
baihailing的博客
04-09 3495
做项目的时候遇到一个问题：键盘弹起时，点击确定按钮没响应，键盘收起了，再点击确定按钮才有响应。网上看了相关文档，包括： https://blog.youkuaiyun.com/weixin_33729196/article/details/87450454 https://www.cnblogs.com/huangjialin/p/6211601.html 以上两种方法讲得都是隐藏键盘，经实践发现没有反...
解决IOS点击事件无效问题
qq_42538872的博客
09-24 1151
在点击对象的CSS属性里面加入 cursor:pointer; 即可
React Native WebView 实现滑动监听
...
02-28 3158
React Native 的 WebView控件默认是没有滚动监听的，实战开发中有可能会遇到监听webview滚动距离的需求，我们可以通过修改源码来实现。 （1）iOS端实现方式 （2）Android端实现方式...
Zepto tap 穿透bug、解决移动端点击穿透问题
weixin_30751947的博客
01-22 140
　　当两个层重叠在一起时，或是有个弹窗，使用Zepto的tap事件时，点击上面的一层时会触发下面一层的事件，特别是底层如果是input框时，必“穿 透”，“google”说原因是“tap事件实际上是在冒泡到body上时才触发”，也就是Zepto的tap事件是绑定在document上的，所以会导致，这个还未求证。 如下图， 当点击关闭按钮，如果下面有商品a链接，则会穿透（关闭的同时，触发了链接）；...
{ "name": "AwesomeProject", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint .", "postinstall": "patch-package", "generate:icons": "node generateIconMap.js" }, "dependencies": { "@ant-design/icons-react-native": "^2.3.2", "@ant-design/react-native": "^5.1.0", "@react-native-async-storage/async-storage": "^1.19.0", "@react-native-community/cameraroll": "^4.0.0", "@react-native-community/masked-view": "0.1.11", "@react-native-community/segmented-control": "^2.1.1", "@react-native-community/slider": "^3.0.3", "@react-native-community/viewpager": "^4.1.6", "@react-native-picker/picker": "^1.16.8", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.12", "@rneui/base": "^4.0.0-rc.8", "@rneui/themed": "^4.0.0-rc.8", "d3-shape": "^1.3.7", "minio": "^7.0.15", "react": "17.0.2", "react-native": "0.68.0", "react-native-background-timer": "^2.4.1", "react-native-device-info": "^8.1.3", "react-native-elements": "^1.2.7", "react-native-exception-handler": "^2.10.10", "react-native-fs": "^2.18.0", "react-native-gesture-handler": "2.14.0", "react-native-get-location": "^2.1.0", "react-native-get-random-values": "^1.4.0", "react-native-image-picker": "^3.8.1", "react-native-image-zoom-viewer": "^3.0.1", "react-native-linear-gradient": "^2.8.3", "react-native-modal-dropdown": "^1.0.2", "react-native-permissions": "3.8.0", "react-native-reanimated": "2.14.4", "react-native-safe-area-context": "3.3.2", "react-native-screens": "3.15.0", "react-native-signature-capture": "^0.4.12", "react-native-sound": "^0.11.1", "react-native-sqlite-storage": "^4.1.0", "react-native-svg-charts": "5.4.0", "react-native-table-component": "^1.2.2", "react-native-vector-icons": "^9.2.0", "react-native-webview": "^11.26.0", "react-redux": "^7.2.0", "redux": "^4.0.5", "redux-thunk": "^2.3.0" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@react-native-community/cli-doctor": "^10.0.0", "@react-native-community/eslint-config": "^2.0.0", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.12", "babel-jest": "^26.6.3", "babel-plugin-import": "^1.13.8", "eslint": "^7.32.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.68.0", "patch-package": "^6.4.7", "react-native-version-check": "^3.5.0", "react-test-renderer": "17.0.2" }, "jest": { "preset": "react-native" } } 这是我的json文件按照你说的降级 降级 @ant-design/react-native 到5.0.1是否有其他报错？
最新发布
08-01
好的，用户现在遇到了依赖冲突的问题，他们按照之前的建议尝试降级@ant-design/react-native到5.0.1，但不确定是否会有其他报错。我需要仔细分析他们的package.json文件，看看是否有其他潜在的问题。 首先，用户...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值