关于RN点击穿透

最新推荐文章于 2023-10-10 14:14:10 发布
最新推荐文章于 2023-10-10 14:14:10 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： React-Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/K563161969/article/details/109720092
版权

  可能是我遇到次数多 我看我同事好几次都还在问我关于这个穿透问题

 先说一下Case 看下是否符合你的场景 再决定是否继续看下去

Case：在页面需要开发一个蒙版遮罩 优先级高于其他层级 但是显示蒙层点击该层级点击事件 会触发到蒙层背后的事件

大致层级图：

 

其实就是一个层级问题 我看人家说的rn提供一个pointerEvents属性 可能是我和同事没遇到用这个场景 所以这个属性对于这个场景无用

解决方法：提高层级的优先级 其实就是保证View2的层级优先度在View之上

或许大家固有思想就是 我都用pistion定位了 给了什么zIndex 为什么优先级不在View上 首先 rn的层级优先级是按照view的从上到下来排的 也就是你view越靠后 层级优先越高

因此：

可以参考一下 希望能帮到你

不爱笑的猫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
RN点击事件的使用
Code Store
06-20 5599
在RN中，相应事件都是通过都是通过TouchableOpacity处理的 技术要点： 1）响应事件方式 TouchableOpacity来处理的，2）状态机getDefaultProps 是用来取值的，取用来不可以改变的值，只想当于getgetInitialState 是用来设置值的，相当于set，get import React, { Component } from 'reac
RN2026 demo 程序
09-27
RN2026是一款专为物联网(IoT)设计的无线微控制器单元(MCU)，集成了Wi-Fi和蓝牙低功耗(BLE)功能，适用于各种智能设备和连接应用。RN2026 Demo程序是瑞昱(Reltek)公司提供的一个示例代码，帮助开发者快速理解和上手RN...
RN 事件穿透pointerEvents属性
Crazy程序猿
10-10 505
系统在View中提供了一个触摸事件的高级属性：pointerEvents。控制View是否可以成为触摸事件的目标。
RN 事件穿透pointerEvents
GarenWang的博客
09-12 6618
有时需要点击上层组件触发下层组件的操作，就要用到事件穿透， 之前写web知道pointer-events pointer-events是CSS3中又一冉冉的属性，其支持的值牛毛般多，不过大多都与SVG相关，我们可以不用理会。当下，对于偶们来讲，与SVG划开界线值得一提的就是[none|auto]两个属性值了。其中”auto”的感觉与width属性的”auto”类似，一般在一些特殊场合露一手，...
RN view添加点击事件
暴走的小新
09-16 620
【代码】RN view添加点击事件。
点击穿透原理及解决
weixin_30648963的博客
05-05 416
一、事件触发顺序 　　PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。一次点击行为，可被拆解成：mousedown->mouseup->click三步。 　　手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touche...
React native如何让点击事件穿透遮罩层(水印)- pointerEvents属性应用
hzxOnlineOk的博客
12-31 1772
假如你有这么一个需求，你需要为一个页面生成水印，水印需要浮在最上层，那如何保证水印不会遮盖底层的内容呢？也就是我们要讲的 “事件穿透” 在PC网页中，直接生成的是浏览器的dom元素进行排列绘制 因此可以利用css自带的属性： pointer-events: none； 遮罩层容器添加一条css属性 pointer-events: none， 遮罩下的就可以点击了，IE11+支持 而React-Native则比较特殊，他毕竟不是运行在浏览器上的，他只是实现了Android和Ios底层V..
自定义控件给子View分配点击事件
pompip的专栏
04-07 1765
自定义控件给子View分配点击事件 自定义控件有时候需要给子控件分配点击事件,如果用注册OnClickLisenter,显的有点low,特别是子控件较多的情况. 网上没找到解决方案,爬了下ListView的源码.发现了一段.重写onTouchEvent,获取点击的x,y; 遍历子view,判断是否有view包含这个点; 注册回调接口,点击事件传递过去.并返回ture,代表事件终止. 关键对
RN8302、RN8302B
08-16
RN8302和RN8302B是微控制器，通常用于电力系统中的智能电表和能源管理系统。这些芯片由瑞萨电子公司制造，专为三相电力计量设计，提供高精度的电能测量和通信功能。在深入探讨RN8302和RN8302B的知识点之前，让我们先...
111.rar_RN8209C程序
07-15
标题中的“111.rar_RN8209C程序”表明这是一个与RN8209C相关的程序，被存放在一个名为“111.rar”的压缩文件中。RAR是一种常见的压缩格式，用于将多个文件打包成一个单一的可下载单元，便于存储和传输。RN8209C可能...
RN4020参考手册
10-18
RN4020 Bluetooth 低功耗模块用户指南 本文档介绍了如何使用RN4020 Bluetooth低功耗模块作为开发工具在目标板上仿真和 调试固件。本文档包含以下章节： • 第1章“简介”简要概述了RN4020，并着重介绍了它的特性和...
RN8302应用笔记.doc
06-04
锐能微RN8302/RN7302是一款专用于三相多功能电表设计的高精度计量芯片。这款芯片在电力计量领域具有广泛的应用，因为它提供了完整的硬件设计指导和可靠的软件设计方案，确保了电表的精确度和稳定性。 在硬件设计...
RN8302B用户手册
04-22
手册内容：芯片介绍+系统功能+寄存器+校表方法+通信接口+电器特性+芯片封装
RN8027 驱动程序包
10-09
RN8027驱动程序包是专为STC单片机设计的一套关键软件组件，主要功能在于确保STC单片机与RN8027模块之间的有效通信和协调工作。RN8027通常是一个无线通信模块，可能支持如RDS（Radio Data System）这样的功能，用于...
RN6752V1_DSv1.6.pdf
11-17
《RN6752V1 1-Channel HD Video Decoder with MIPI CSI2 Output》数据手册详细解析 RN6752V1是一款专为高清视频信号转换至MIPI CSI2输出设计的一通道高清视频解码器。这款器件主要用于解决在现代数字图像系统中模拟...
RN基础组件4 —— Button 和 TouchableOpacity 和 Pressable
hdj0511的博客
10-17 1046
RN基础组件4 —— Button 和 TouchableOpacity 和 Pressable
React Native TouchableOpacity 封装 防止快速点击 多次响应
xxlyzgt的博客
07-12 3705
不耽误干活，直接上代码，功能比较简单，具体延时时间自己定，还需要啥功能自己改进一下。   import React,{ Component } from "react"; import {TouchableOpacity, View} from "react-native"; class Button extends React.Component<ButtonProps, any&...
解决布局点击事件穿透的问题
hijunmeng的专栏
04-23 9458
在编写xml时使用到RelativeLayout或FrameLayout时，如果布局有层次结构，会发现点击上层时会触发下层的事件，这有时候并不是我们想要的结果，我们只想点击上层的就只触发上层布局的事件而不影响下层的，这时可以在上层的布局中增加android:clickable="true"的属性，这样下层的事件就不会被触发了。
RN关于websocket
最新发布
01-25
React Native提供了对WebSocket的支持，可以在应用中使用WebSocket进行实时通信。下面是一个使用WebSocket的示例： ```javascript import React, { useEffect, useState } from 'react'; import { View, Text } from 'react-native'; const WebSocketExample = () => { const [message, setMessage] = useState(''); useEffect(() => { const socket = new WebSocket('ws://localhost:8080'); socket.onopen = () => { console.log('WebSocket连接已打开'); socket.send('Hello Server!'); }; socket.onmessage = (event) => { console.log('收到服务器消息:', event.data); setMessage(event.data); }; socket.onclose = () => { console.log('WebSocket连接已关闭'); }; return () => { socket.close(); }; }, []); return ( <View> <Text>收到的消息: {message}</Text> </View> ); }; export default WebSocketExample; ``` 在上面的示例中，我们创建了一个WebSocket对象并连接到指定的服务器地址。然后，我们监听WebSocket的事件，包括连接打开、收到消息和连接关闭。在组件卸载时，我们关闭WebSocket连接。 请注意，上述示例中的服务器地址是示例地址，你需要根据实际情况替换为你自己的服务器地址。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值