react-native - React Native 中地图内容的底页,类似于谷歌地图 UI
问题描述
我正在尝试在 React Native中实现类似于 Android 上的谷歌地图“探索”的 UI 布局(参见gif )。
在我的 UI 设计中,我在屏幕底部有应用程序导航选项卡,带有完整的页面地图背景,上面覆盖有来自选项卡上方的“底页”,顶部有一个搜索框组件。请参阅下面的 UI 草图。
我发现了各种看起来很有用的 react-native ui 组件,但我无法弄清楚将它们排列在我想要的布局中的样式。
我正在查看的几个底部组件,例如,rn-bottom-drawer 显示的 gif 与我正在尝试创建的内容类似,例如这个动画,但我找不到该 UI 的实际代码示例创建的。例如,同一个库示例仅在空屏幕上显示底部抽屉。
包装元素和样式的哪种组合可以让我创建所描述的布局?我来自 XAML 背景,这种布局很容易创建,但我无法理解如何在本机反应中做到这一点。
解决方案
使用“react-native-swipe-up-down”组件可以实现一半。在应用程序上方向上滑动有效,但它确实是错误的。和你有同样的问题,直到今天找不到比向上滑动更好的东西。
推荐阅读
- javascript - Kotlin 中简单月相算法的问题
- python - 如何始终如一地从 SQLAlchemy 获取非标准类型的 python_type?
- numpy - 使用 PyArray_SimpleNew 创建 PyArrayObject 的分段错误
- javascript - 如何通过客户端 JavaScript 将任何类型的文件上传到 S3 存储桶?
- swift - 为矩形设置动画,使其向上/向下
- c - Sn(x) = (x-1)^2n+1/(2n+1)!(n+1) - C 语言
- ios - 如何从 ios 相机胶卷确切的 URI 路径中获取选取的图像?
- android - 无法解析 com.github.navasmdc:MaterialDesign:1.5
- html - Z-index 过滤器影响具有较高 z-index 的内容
- ruby-on-rails - 如何在 Rails 中设置 cookie 以确保安全