React Native：通过 ScrollView 将触摸事件传递到 z 平面下方的元素

Question

我正在尝试编写一个具有多个以不同速率滚动的窗格的视差元素。

为了实现这一目标，我有多个

View

绝对定位并堆叠在 z 平面中，顶部有一个

ScrollView

来捕获拖动事件，从中我将设置顶部位置和下部窗格的不透明度的动画。 （使用

ScrollView

的原因是为了受益于为我们提供的弹跳和动量动画。）

但是，下部窗格可能包含想要接受触摸的元素（而不是滚动）。我遇到的问题是

ScrollView

捕获了这些触摸，并且似乎没有一种机制来传递它们。基本上，我希望

ScrollView

响应拖动，但下部元素响应触摸。

有办法实现吗？

Answer 1

我已经在 iOS 上成功使用了 https://github.com/rome2rio/react-native-touch-through-view。

然而，在 Android 上，当滑动适用于底层视图时，不知怎的，点击事件并没有达到最低点。

Answer 2

要让 React Native 中的触摸事件与 ScrollView 下方的组件交互，请在 ScrollView 上设置

pointerEvents="box-none"

，以允许触摸事件通过。如果您需要对这些事件进行详细控制，PanResponder 可以区分用于滚动的拖动事件以及用于与下面的元素交互的点击events。对于复杂的手势，请探索 React Native-gesture-handler。始终在 iOS 和 Android 上进行测试，以确保一致的事件处理。