【发布时间】：2019-07-14 06:14:25
【问题描述】：
我正在开发一个 react-native 应用程序。我正在尝试制作一个类似于 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
欢迎任何形式的帮助，谢谢！
【问题讨论】：
-
如您所知，没有理想的软件包解决方案。我认为尝试从头开始创建它对您来说是一个很好的挑战。这是绝对可行的，我知道你可以做到。查看 react-native-reanimated 和 react-native-gesture-handler 来实现这一点。如果您能够设法从头开始创建它，您将增加对手势和动画的了解。不会痛的
-
谢谢你，我要深入研究！
标签： ios react-native maps panel bottom-sheet