我试图让一个透明的叠加层在应用程序中向下滑动,这里非常像这样(全部/过滤器):
到目前为止,我发现了react-native-slider和react-native-overlay . 我将滑块修改为从上到下工作,但它总是沿着ListView向下移动 . 如果使用react-native-overlay,叠加层是静态的,我无法移动它 .
我从原始的react-native教程in this gist中添加了一些演示代码 . 单击按钮时,内容应该粘住,菜单应叠加 . 透明度现在并不重要,但会很棒 .
什么是最聪明的解决方案?
5 回答
ListView不向下移动的关键是将叠加层的位置设置为
absolute
. 通过这样做,您可以手动设置视图的位置和宽度/高度,它不再遵循flexbox布局 . 看看下面的简短示例 . 叠加层的高度固定为360,但您可以轻松地为其设置动画或使其动态化 .现场演示:https://sketch.expo.io/S15Lt3vjg
来源回购:https://github.com/Dorian/sketch-reactive-native-apps
您可以将此示例用于创建叠加 . 您可以更改叠加的可见和不可见状态 .
最聪明的方式?
对我来说最聪明的方法是使用来自react-native的Modals来构建高度可定制的体验,你可以轻松设置模态的运动方向,设置透明度,切换可见性等等,我个人从未使用现有的npm模块来实现方面抽屉或导航栏,我使用Modals .
如果您希望我能提供一个示例代码片段,它使用Modals实现导航抽屉
也许最好使用
ImageBackground
-Component .