安卓RN样式：如何在子视图超出父视图时触发点击事件？

Android

2023-09-20 14:21:06

当RN子容器超出父容器时，为什么点击事件不起作用？

当RN子容器超出父容器时，点击事件不起作用的原因有以下几点：

事件冒泡： 当一个元素上的点击事件发生时，该事件会冒泡到其父元素。如果子元素超出父元素的边界，点击事件就会冒泡到父元素，从而不会触发子元素的点击事件。
坐标转换： 当点击事件发生时，点击位置的坐标是相对于触发该事件的元素。当子元素超出父元素的边界时，点击位置的坐标可能会超出父元素的边界，从而不会触发子元素的点击事件。

如何使子视图超出父视图时触发点击事件？

要使子视图超出父视图时触发点击事件，可以采用以下解决方案：

使用嵌套视图： 您可以使用嵌套视图来解决这个问题。在父视图中放置一个子视图，然后将子视图的pointerEvents属性设置为'none'。这将阻止子视图中的点击事件冒泡到父视图。
使用绝对定位： 您可以使用绝对定位来解决这个问题。将子视图的position属性设置为'absolute'，然后将子视图的top、left、bottom和right属性设置为适当的值，以使其超出父视图的边界。
使用事件代理： 您可以使用事件代理来解决这个问题。在父视图中放置一个事件侦听器，然后在事件侦听器中检查点击位置是否在子视图内。如果是，则触发子视图的点击事件。

代码示例：

以下是使用嵌套视图解决此问题的示例代码：

<View style={{ flex: 1 }}>
  <View style={{ flex: 1, backgroundColor: 'red' }} />
  <View style={{ position: 'absolute', top: 100, left: 100, width: 100, height: 100, backgroundColor: 'blue', pointerEvents: 'none' }} />
</View>

以下是使用绝对定位解决此问题的示例代码：

<View style={{ flex: 1 }}>
  <View style={{ flex: 1, backgroundColor: 'red' }} />
  <View style={{ position: 'absolute', top: 100, left: 100, width: 200, height: 200, backgroundColor: 'blue' }} />
</View>

以下是使用事件代理解决此问题的示例代码：

<View style={{ flex: 1 }} onClick={handleParentClick}>
  <View style={{ flex: 1, backgroundColor: 'red' }} />
  <View style={{ position: 'absolute', top: 100, left: 100, width: 200, height: 200, backgroundColor: 'blue' }} />
</View>

const handleParentClick = (e) => {
  const rect = e.target.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  if (x >= 100 && x <= 300 && y >= 100 && y <= 300) {
    // 子视图中的点击事件
  }
};