React Native中如何让上层元素不拦截下层TouchableOpacity点击事件

实现方案 #

你的需求完全可以实现，只需要给上层的<Text>组件添加pointerEvents="none"属性即可。

pointerEvents是React Native内置的触摸事件控制属性，取值为none时，当前组件会完全不响应任何触摸交互，所有触摸事件会直接透传给下层可响应事件的组件，不会影响组件本身的渲染展示，刚好匹配你上层文本正常显示、点击透传给下层触发事件的需求。

修改后参考代码如下：

<View>
  <TouchableOpacity onPress={() => {
    // 此处写你的点击逻辑
  }} />
  <Text style={{position: 'absolute'}} pointerEvents="none">hello</Text>
</View>

如果后续需要给上层Text单独添加点击逻辑，只需要移除该属性或者调整为其他对应取值即可，不会影响现有业务逻辑。

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