React Native 中地图内容的底部，类似于谷歌地图 UI

Question

我正在尝试在 Android 上实现类似于谷歌地图“探索”的 UI 布局，（参见gif）在 React Native 中。

在我的 UI 设计中，我在屏幕底部有应用程序导航选项卡，具有完整的页面地图背景，覆盖有来自选项卡上方的“底部工作表”，以及顶部的搜索框组件。请参阅下面的 UI 草图。

我发现了各种看起来很有用的 react-native ui 组件，但我无法弄清楚将它们排列在我想要的布局中的样式。

我正在查看的几个底部组件，例如 rn-bottom-drawer 显示的 gifs 类似于我尝试创建的内容，例如这个动画，但我找不到该 UI 的实际代码示例创建。例如，同一个库示例仅在空屏幕上显示底部抽屉。

什么样的包装元素和样式组合可以让我创建所描述的布局？我来自 XAML 背景，这种布局很容易创建，但我无法理解如何在 React Native 中做到这一点。

Answer 1

使用组件“react-native-swipe-up-down”就可以实现这一点。应用程序上方的向上滑动可以工作，但确实有问题。遇到了与您同样的问题，直到今天才找到比向上向下滑动更好的方法。