Android 上 React Native 中无法点击父元素边界外的可触摸元素？这个方法解决

Android

2024-03-08 01:49:57

## 点击父元素边界外的绝对定位可触摸元素：Android 解决方案

在 React Native 中，在 Android 设备上，当一个绝对定位的可触摸元素（如 TouchableOpacity）放置在父元素的边界之外时，它可能无法点击。这篇文章将解释这个常见问题背后的原因，并提供一个简单有效的解决方法。

原因

当可触摸元素位于父元素边界之外时，触碰事件会穿透元素并传递到父元素。这会导致无法点击可触摸元素。

解决方案

一种简单有效的解决方法是在父元素外部创建一个透明的层，并将其放置在可触摸元素的后面。此图层将捕获触摸事件并将其传递给可触摸元素。

步骤

在父元素外部创建一个绝对定位的 View。
设置 View 的 backgroundColor 为透明，以使其不可见。
将 View 的 zIndex 设置为比可触摸元素的 zIndex 低。
将可触摸元素放置在 View 上方。

代码示例

<View style={{height: 60, width: '100%', zIndex: 1}}>
  <View style={{position: 'absolute', zIndex: 0, backgroundColor: 'transparent', width: '100%', height: '100%'}} />
  <TouchableOpacity onPress={() => console.log('pressed')} style={{position: 'absolute', zIndex: 2, backgroundColor: 'yellow', width: 100, height: 50, top: 70}} />
</View>

其他注意事项

确保透明层覆盖可触摸元素的整个区域。
透明层也可以用于处理其他触碰事件，例如长按或拖动。
这种方法不会在 iOS 上产生任何负面影响。

结论

通过使用一个透明层，我们可以解决 Android 上无法点击父元素边界外的可触摸元素的问题。这种方法简单有效，无需更改 React Native 核心代码。

常见问题解答

透明层会影响可触摸元素的外观吗？
不，透明层是不可见的，因此不会影响可触摸元素的外观。
透明层会影响其他触碰事件吗？
是的，透明层会捕获所有触碰事件，因此也可以用于处理长按或拖动等其他事件。
这种方法在 iOS 上是否有效？
这种方法主要针对 Android 设备。在 iOS 上，点击父元素边界外的可触摸元素通常不会出现问题。
我可以将透明层添加到任何父元素吗？
是的，您可以将透明层添加到任何父元素，只要它位于可触摸元素后面即可。
是否有其他解决此问题的方法？
其他可能的解决方法包括使用 PointerEvents 或 PointerEvents Manager，但透明层方法通常是简单且有效的解决方案。