React native如何让点击事件穿透遮罩层(水印)- pointerEvents属性应用

假如你有这么一个需求，你需要为一个页面生成水印，水印需要浮在最上层，那如何保证水印不会遮盖底层的内容呢？也就是我们要讲的 “事件穿透”

 

在PC网页中，直接生成的是浏览器的dom元素进行排列绘制

因此可以利用css自带的属性： pointer-events: none；

遮罩层容器添加一条css属性 pointer-events: none， 遮罩下的就可以点击了，IE11+支持

 

而React-Native则比较特殊，他毕竟不是运行在浏览器上的，他只是实现了Android和Ios底层View组件的UI框架

但是他也为我们提供了一份解决方案：View组件的pointerEvents属性

来自官网的介绍：用于控制当前视图是否可以作为触控事件的目标（特别注意 不要写Touchablexxx组件进行测试，因为这个组件本身就是要被点击触发的）

auto：视图可以作为触控事件的目标。
none：视图不能作为触控事件的目标。
box-none：视图自身不能作为触控事件的目标，但其子视图可以

<View pointerEvents="none">
  // something View Component
</View>

RN未必能支持原生js阻止事件冒泡、捕获、穿透等等，而且写起来比较麻烦，不推荐