React原生：透明视图后面的按钮

n3ipq98p 于 2023-01-31 发布在 React

关注(0)|答案(1)|浏览(106)

出于布局的目的，我在React Native应用中的视图顶部渲染了几张图片，这些图片位于屏幕的顶部、左侧和右侧边界，它们包含在一个背景透明的View组件中。
这意味着屏幕上的所有内容都在View组件的后面，问题是我现在不能触摸任何实际内容，因为它被透明的View覆盖了

**问题：**如何在React-Native中触摸透明视图后面的组件？

我不是第一个处理这个问题的人，但网上的记录似乎很差

1条答案

一个简单的解决方案是将透明View的pointerEvents属性设置为none：

<View pointerEvents="none">
  {/* your corner images */}
</View>

从React Native 0.71.0开始，还可以将其设置为style属性：

<View style={{ pointerEvents: 'none' }}>
  {/* your corner images */}
</View>

来自MDN的定义：
除了指示该元素不是鼠标事件的目标之外，值none还指示鼠标事件"穿过"该元素并将该元素"下面"的任何内容作为目标。
其他资源：