如何实现Pressable仅响应父组件B点击，排除子组件A？

问题场景 #

我有父组件B和子组件A，希望点击B时调用navigation.goBack()返回上一页，但当前代码中点击子组件A也会触发返回操作，需要实现仅点击B的非A区域才执行返回的效果。

原代码：

<Pressable onPress={() => navigation.goBack()}>
   <View>
     <Text>A</Text>
   </View>
</Pressable>

解决方案 #

方案1：阻止子组件事件冒泡 #

在子组件外层包裹Pressable，通过stopPropagation()阻止触摸事件向上传递到父级Pressable：

<Pressable onPress={() => navigation.goBack()}>
  <View>
    <Pressable onPress={(e) => e.stopPropagation()}>
      <Text>A</Text>
    </Pressable>
  </View>
</Pressable>

方案2：分离可点击区域与子组件 #

调整布局结构，将父组件的可点击区域作为独立背景层，子组件通过绝对定位覆盖在上方，避免点击子组件时触发背景层的回调：

<View style={{ 
  width: '100%', 
  height: '100%', // 根据实际布局设置尺寸
  position: 'relative' 
}}>
  {/* 父组件B的可点击背景区域 */}
  <Pressable 
    onPress={() => navigation.goBack()} 
    style={{ flex: 1 }}
  />
  {/* 子组件A，独立于可点击区域 */}
  <View style={{ 
    position: 'absolute', 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center'
  }}>
    <Text>A</Text>
  </View>
</View>

原理说明 #

React Native的触摸事件默认会向上冒泡，子组件的点击事件会传递到父级的Pressable触发回调。以上两种方案分别通过阻止事件冒泡、物理分离可点击区域的方式解决问题，可根据你的布局复杂度选择合适的实现方式。

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