问题描述
我是ReactNative的初学者,我想知道如何使用 React Navigation 5
对我的第一个屏幕进行编码在我的界面中,我们将:
- SplashScreen (带有Lottie动画徽标)
- 用于登录的第一屏幕(1);如果已登录,则个人资料
- 发现屏幕(2),带有可在零件上访问的转盘和3个菜单
- 订阅主页屏幕(3)
- 播放器内容(如果您选择了轮播中的电影)
我想用滑动手势在屏幕(1)-(2)-(3)之间实现导航 这意味着如果您在:
-屏幕(1),然后向左滑动←??屏幕(2)出现过渡
过渡期间 屏幕(1)上方的元素(按钮,登录名,徽标,文本)将逐渐消失 同时与手势移动同步。背景视频将在后台停留,并且 屏幕(2)的新元素(如“轮播”,顶部按钮和中间文字标题)将与 同时播放动画 同样的原理,当您进入屏幕(2)进入屏幕(3)并以相反的方向返回时。
所以我们在这些屏幕之间会有 4个过渡
在屏幕(2)上,我们还将具有 3个菜单,只需按左上角按钮,它们就可以以相同的过渡方式出现; 标题; 右键
因此屏幕发现(2)将成为用户界面的中心
屏幕(3)与背景(1)和(2)
具有不同的背景屏幕(3)将是带有垂直导航的公式的开头。 因此,当我们按下底部按钮时,将是另一部分。
当您单击Snapchat视频时,播放器内容将显示在屏幕(2)上,具有相同的效果,我们将在此屏幕中部署底部工作表菜单。
- 问题
如何首先对SplashScreen(0)进行编码?
我是否需要在导航中将屏幕(1)-(2)-(3)视为一个屏幕,因为它将具有共同点元素并具有与背景类似的过渡效果?
此导航您建议巫婆建议吗?
预先感谢您的帮助??
解决方法
首先,对于此类可滑动事件,您必须格外小心,因为将来如果您不想在此堆栈中添加嵌套的可滑动组件或轮播,可能会导致一些问题,从而迫使您做出一些重大改变在系统上进行更改。
对于动画,当然,在反应导航5中有一些内置的动画,但是我不认为它们是您想要的。因此,您始终可以进行无限的自定义动画事件,只需进行一些详细的研究或阅读文档即可。
但是在所有这些事情之前,我强烈建议您看一下Ninja的react导航教程,以了解基础知识。