如何使iOS底部的Google Maps底面板面板为react-native？

Question

我正在开发一个本机应用程序。我正在尝试使一个UI元素类似于iOS中“地图”上的UI元素，您可以在其中从底部滑动面板。 列表的行为非常复杂，如下所示：

• 在面板完全打开之前，您无法向下滚动列表。
• 尝试将其向下滚动会使面板上升，然后如果您继续在屏幕上滑动，则列表将开始滚动。

当然：

• 在列表开始之前，您不能将面板向下滑动。
• 如果您尝试将面板向下滑动而列表没有完全向上滚动，则最终将列表滚动到开头，然后将面板下拉。

列表向上或向下滚动以及面板向上或向下移动必须一步一步完成。用户不必将手指从屏幕上拉出即可执行第二个操作。这是实际的困难部分。此外，它必须在iOS和Android上运行。

An example GIF of the iOS panel and the expected behavior.

完美的模块应该是这样的，但是即使到达顶部，列表仍然可以滚动：https://github.com/donaldmorton/react-native-bottom-drawer

我尝试了这个模块，但没有成功： https://github.com/simonhoss/react-native-touch-through-view

像react-native这样的东西将是完美的： How can I mimic the bottom sheet from the Maps app?

我已经检查了该帖子： React Native slide out panel and scrollview

欢迎任何帮助，谢谢！

Answer 1

您可以看到https://github.com/osdnk/react-native-reanimated-bottom-sheet。 它是使用react-native-gesture-handler从头开始构建的，并且react-native-reanimated