如何实现视图叠加时让背景视图保持可交互（absolute定位）

当你用position: 'absolute'让前景视图叠加在背景视图上时，前景视图会默认拦截所有触摸事件，导致背景视图无法交互。解决方法很简单，给前景视图添加触摸穿透的样式属性：

• 在React Native环境下，给前景视图样式添加pointerEvents: 'none'，这个属性会让前景视图不响应任何触摸事件，所有触摸操作都会穿透到下层的背景视图。如果前景视图内部有需要交互的元素，只需给这些元素单独设置pointerEvents: 'auto'，就能恢复它们的交互能力。

修改后的样式示例：

overlapView: {
  bottom: 0,
  left: 0,
  marginBottom: bottom,
  paddingTop: top,
  position: 'absolute',
  right: 0,
  top: 0,
  pointerEvents: 'none', // 开启触摸穿透
},
backgroundView: {
  flex: 1
}

若前景视图内有需要交互的子元素（比如按钮），单独给该元素设置样式：

interactiveButton: {
  pointerEvents: 'auto', // 恢复元素交互能力
  // 其他自定义样式
}

• 如果是Web环境（如React DOM），则使用CSS属性pointer-events: none，逻辑完全一致：给前景容器设置该属性实现触摸穿透，需要交互的子元素设置pointer-events: auto即可。

内容的提问来源于stack exchange，提问作者moribaleta