react-navgation导航-栈存储简单理解

实战-如图【react-navigation文档

上图简单介绍

  1. SwitchNavigator: 用于页面跳转之后,删除之前的路由;即无法返回。可用于登录跳转首页。
  2. BottomTabNavigator: 底部tab栏选项卡
  3. ModalScreen【文档】: 类似弹窗,最顶层。本图未用到:一般用于调取摄像头等可关闭、多页面都可能应用的功能 - 实际开发中栈需要触发Unmount事件问题。

导航栈

栈: 先进后出
问题:

  1. 先进入的screen并不会触发Unmount事件;
  2. 不同栈之间跳转之后,导航条title错误、触发返回按钮后造成导航错乱

栈划分【如图】

SwitchNavigator栈 > Screen > Tab栈 > Stack栈 > Screen

实际开发中跳转可能遇到的问题

  1. 当我们点击stack跳转下一个连接时,实际上不会被卸载,所以不会触发当前页面的Unmount事件,它会直接往栈内push。只有当我们触发“返回”按钮时,当前页面才会触发Unmount事件【后进先出】,页面才被卸载掉。【参阅Navigation lifecycle
  2. StackActions - PopToTop导航到堆栈的顶部路由方法 - 导航到堆栈的顶部路由,销毁所有其他路线: 只能在当前堆栈内返回第一个,不能跳出该堆栈进行返回【不能隔栈】
  3. 不同栈之间stack跳转 - 导航栏名称及返回错乱问题:解决方案将跳转路由在此栈导航中重新引入、注册一下,即可使用
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容