当我开始学习 React Native 的时候,官方文档以及很多开发者都说,处理页面间的跳转应该使用 Navigator 以及一个不再被推荐使用的过期组件 NavigatorIOS 。当我用了 Navigator 后,我发现了另一个可以用来代替它的组件:NavigationExperimental。在看过一些相关文章,并且做了一些深入研究之后,我发现 Navigator 和 NavigationExperimental 最将会被 react-navigation这个库所代替。这么说可能有些笼统,接下来我会结合我创建app的过程详细说一下我的发现。
NavigatorIOS 是 React Native 中提供的第一个页面导航解决方案。顾名思义,它是在 RN 支持安卓之前被创建的,并且只能在 ios 上使用。当它在 ios 上调用原生的导航条时, 会存在一些没有被修复的 bug,并且由于不能自定义样式,导致我们很难按照喜欢的方式定义以自己 app 中的导航条的样式。我甚至无法想象现在还有人愿意在新创建的项目中使用这个组件了。
Navigator 是用来被代替 NavigatorIOS。由于它是使用Js代码实现的,所以它支持 iOS 和 Android 双平台。它比 NavigatorIOS 使用更灵活, 但也由于不是 Native 代码所以在过渡动画显示效果上会显得比较慢。尽管如此,官方文档中依然引导 RN 初学者们在新项目中使用 Navigator,。但是这个组件正在被逐渐代替,所以如果你正打算用 RN 创建应用,或者刚开始学 RN。我不推荐你使用这个组件。
NavigationExperimental 就是对 Navigator 进行了一些改进 。也正是因为混杂了 Navigator 的原因导致该组件的代码显得有些混乱且难以理解。 NavigationExperimental 使用 Scenes 间单向数据流动 (原则上它支持Flux).并且它将导航部分的代码和View逻辑分离。
NavigationExperimental 唯一存在的问题就是当你能控制的越多,设置和使用起来也就变得更困难。 就像 NavigatorIOS 和 Navigator 一样, NavigationExperimental 正在逐渐被废弃。
最新推荐的解决方式就是使用 React Navigation,这种方式也被寄予可以解决前几种方式中存在的问题。 React Navigation 的独特并不仅是因为它可以同时支持 iOS and Android , 而是它也可以在 web 中使用。我开始逐渐使用 React Navigation 代替 Navigator,并且不得不说这是个很赞的库。它非常灵活,并且让管理 tabs,管理导航栈,管理导航抽屉都变得很容易。它不像 NavigationExperimental 那么复杂, 很容易上手使用(我仅用了15分钟去理解它) ,并且需要我们处理的逻辑很少,因为大部分这个库已经替我们做了。它同样也支持 deep linking。
仓库地址:https://github.com/react-community/react-navigation
RN 中的导航机制本来是一团糟,但是 react-community 做的很棒,最终给出了 React Navigation 这样一个长期解决方案。我在 App 中使用它也有一段时间了,它的简单易用和性能上的表现都让我觉得很满意 。目前它虽然只发布了第五个 beta 版本,但表现似乎比较稳定。 我也特别期待这个库以后的变化。
本文为 Marno 翻译,首发于公众号 aMarno。【 原文点这里 】 (需科学上网)。更多 React Native 英文翻译文章关注我的公众号后,点击 RN干货 查看。