如何使Google Maps的iOS底部面板成为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