react-native - React Native 中 map 内容的 Bottom Sheet ,类似于谷歌地图 UI

标签 react-native react-native-android bottom-sheet react-native-flexbox

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

在我的 UI 设计中,我在屏幕底部有应用程序导航选项卡,带有完整的页面 map 背景,覆盖有来自选项卡上方的“Bottom Sheet ”,顶部有一个搜索框组件。请参阅下面的 UI 草图。

UI Design

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

我正在查看的几个底部组件,例如,rn-bottom-drawer 显示类似于我正在尝试创建的 gif,例如 this animation ,但我找不到有关如何创建该 UI 的实际代码示例。比如同一个库example只是在空屏幕上显示底部抽屉。

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

最佳答案

使用“react-native-swipe-up-down”组件可以实现一半。
在应用程序上方向上滑动有效,但它确实是错误的。和你有同样的问题,直到今天找不到比向上滑动更好的东西。

关于react-native - React Native 中 map 内容的 Bottom Sheet ,类似于谷歌地图 UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57176832/

相关文章:

react-native - 返回按钮 react native 退出应用程序

android - 8月1日之后,我可以更新我的Android应用程序以支持64位吗?

Android - 在键盘上方显示 BottomSheetDialogFragment

android - BottomSheetView 中的 animateLayoutChanges ="true"显示意外行为

android - 在 iOS 和 Android 上 react native 模态模糊/活力?

javascript - 创建一个按钮到新的路由reactJS

android - Gradle Sync在AS中失败:找不到com.android.tools.build:gradle:4.0.0

reactjs - Redux 形式,提供给 'value' 的类型 'number' 的无效 prop 'TextInput' ,预期为 'string'

react-native - React Native (Android) 中的屏幕截图

android - 错误 : attribute behaviour_peekHeight not found