实战-如图【react-navigation文档】
上图简单介绍
- SwitchNavigator: 用于页面跳转之后,删除之前的路由;即无法返回。可用于登录跳转首页。
- BottomTabNavigator: 底部tab栏选项卡
- ModalScreen【文档】: 类似弹窗,最顶层。本图未用到:一般用于调取摄像头等可关闭、多页面都可能应用的功能 - 实际开发中栈需要触发Unmount事件问题。
导航栈
栈: 先进后出
问题:
- 先进入的screen并不会触发Unmount事件;
- 不同栈之间跳转之后,导航条title错误、触发返回按钮后造成导航错乱
栈划分【如图】
SwitchNavigator栈 > Screen > Tab栈 > Stack栈 > Screen
实际开发中跳转可能遇到的问题
- 当我们点击stack跳转下一个连接时,实际上不会被卸载,所以不会触发当前页面的Unmount事件,它会直接往栈内push。只有当我们触发“返回”按钮时,当前页面才会触发Unmount事件【后进先出】,页面才被卸载掉。【参阅Navigation lifecycle】
- StackActions - PopToTop导航到堆栈的顶部路由方法 - 导航到堆栈的顶部路由,销毁所有其他路线: 只能在当前堆栈内返回第一个,不能跳出该堆栈进行返回【不能隔栈】
- 不同栈之间stack跳转 - 导航栏名称及返回错乱问题:解决方案将跳转路由在此栈导航中重新引入、注册一下,即可使用