ios - 如何在 react-native 中制作 iOS 地图底部面板？

Question

我正在开发一个 react-native 应用程序。我正在尝试制作一个类似于 iOS 地图上的 UI 元素，您可以在其中从底部滑动面板。列表的行为非常复杂，因为：

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

而且当然：

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

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

iOS 面板的示例 GIF 和预期行为。

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

我尝试使用此模块但没有成功： https ://github.com/simonhoss/react-native-touch-through-view

react-native 中的类似内容将是完美的： 如何模仿地图应用程序的底部表格？

我已经查看了这篇文章： React Native slide out panel and scrollview

欢迎任何形式的帮助，谢谢！

标签： iosreact-nativemapspanelbottom-sheet

Answer 1

你可以看到https://github.com/osdnk/react-native-reanimated-bottom-sheet。它使用 react-native-gesture-handler 和 react-native-reanimated 从头开始​​构建