在工作中因为业务需求接触到了 React native，是一个已经有功能的迭代版本 APP，在开发新模块的时候，在涉及到路由跳转的时候遇到了些许问题，发现分为页面栈和选项导航卡页面栈。

StackNavigator

顾名思义就是堆栈式导航的意思，但是此页面栈子页面可嵌套子页面，实现多层级嵌套路由的跳转。里面有多种跳转方式，例如：navigate、push，秉承着“先进后出”、“后进先出”的原则，从当前页面跳转到目标页面，是将目标页面压入栈顶。

  • push

从当前页面跳转到目标页面，将目标页面压入栈顶，每次调用就算该页面已经存在，都会向栈内添加一个新页面。

  • navigate

    • 在栈内没有某目标页面存在的情况下，使用 push 或者 navigate 都可以正常跳转，但是如果栈内存在目标页面的时候，navigate 则会失效，但也不会报错。

    • 如果从 A 页面->B 页面->C 页面这样的跳转顺序，在 C 页面使用 navigate 跳转到 A 页面的话，则 A 以上的页面都会从栈内被取出，相当于 popToTop，从 C 页面返回到了 A 页面。

  • pop

从当前页面返回至上一个页面，也就是将栈顶的页面取出。

  • popToTop

    当前页面和第一个页面之间的页面都将从栈内取出，返回至栈内的第一个页面。

  • goBack

    将栈顶的页面取出，返回至栈内的上一个页面。

TabNavigator

这个称之为选项导航卡页面栈，在 APP 上一般都会在下方有个导航栏，数量根据业务来定。常见的一般有：首页、我的。但我更习惯称之为模块。在切换的时候跳至到 StackNavigator 的页面栈后，TabNavigator 的页面栈并不会被销毁触发对应的函数，而是会被隐藏缓存起来。如果需要知道是否离开当前页面，则需要使用navigation来订阅相关的事件：blur、focus。

  • navigate

    由于 tab 页面都是同级板块，调用 navigate 就能实现跳转。

    不能使用 push。

    感想

    虽然市场上大部分 APP 都已经弃用原生 Android、IOS，被混合 APP 等占据，但是因为运行容器的问题还是会与平常开发的在浏览器运行的页面不同，特别是涉及到路由、原生 api 部分，传统前端还是会摔不少跤、掉不少坑的，但是坑是踩一个少一个（真的吗，我心里也打鼓哈哈哈哈），但不可否认的是开发是一个终身学习的事情。