Native️React Native-> React Navigation 5-如何为动画UI很好地构建我的屏幕?

问题描述

我是ReactNative的初学者,我想知道如何使用 React Navigation 5

对我的第一个屏幕进行编码

在我的界面中,我们将:

  • SplashScreen (带有Lottie动画徽标)
  • 用于登录的第一屏幕(1);如果已登录,则个人资料
  • 发现屏幕(2),带有可在零件上访问的转盘和3个菜单
  • 订阅主页屏幕(3)
  • 播放器内容(如果您选择了轮播中的电影)

enter image description here


我想用滑动手势在屏幕(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导航教程,以了解基础知识。

React navigation 5 by Net Ninja