(译)React Native 中的导航器怎么选?

96
Marno
2017.03.13 07:24* 字数 979

01 前言

当我开始学习 React Native 的时候,官方文档以及很多开发者都说,处理页面间的跳转应该使用 Navigator 以及一个不再被推荐使用的过期组件 NavigatorIOS 。当我用了 Navigator 后,我发现了另一个可以用来代替它的组件:NavigationExperimental。在看过一些相关文章,并且做了一些深入研究之后,我发现 Navigator 和 NavigationExperimental 最将会被 react-navigation这个库所代替。这么说可能有些笼统,接下来我会结合我创建app的过程详细说一下我的发现。

02 NavigatorIOS

NavigatorIOS 是 React Native 中提供的第一个页面导航解决方案。顾名思义,它是在 RN 支持安卓之前被创建的,并且只能在 ios 上使用。当它在 ios 上调用原生的导航条时, 会存在一些没有被修复的 bug,并且由于不能自定义样式,导致我们很难按照喜欢的方式定义以自己 app 中的导航条的样式。我甚至无法想象现在还有人愿意在新创建的项目中使用这个组件了。

03 Navigator

Navigator 是用来被代替 NavigatorIOS。由于它是使用Js代码实现的,所以它支持 iOS 和 Android 双平台。它比 NavigatorIOS 使用更灵活, 但也由于不是 Native 代码所以在过渡动画显示效果上会显得比较慢。尽管如此,官方文档中依然引导 RN 初学者们在新项目中使用 Navigator,。但是这个组件正在被逐渐代替,所以如果你正打算用 RN 创建应用,或者刚开始学 RN。我不推荐你使用这个组件。

04 NavigationExperimental

NavigationExperimental 就是对 Navigator 进行了一些改进 。也正是因为混杂了 Navigator 的原因导致该组件的代码显得有些混乱且难以理解。 NavigationExperimental 使用 Scenes 间单向数据流动 (原则上它支持Flux).并且它将导航部分的代码和View逻辑分离。

NavigationExperimental 唯一存在的问题就是当你能控制的越多,设置和使用起来也就变得更困难。 就像 NavigatorIOS 和 Navigator 一样, NavigationExperimental 正在逐渐被废弃。

05 React Navigation

最新推荐的解决方式就是使用 React Navigation,这种方式也被寄予可以解决前几种方式中存在的问题。 React Navigation 的独特并不仅是因为它可以同时支持 iOS and Android , 而是它也可以在 web 中使用。我开始逐渐使用 React Navigation 代替 Navigator,并且不得不说这是个很赞的库。它非常灵活,并且让管理 tabs,管理导航栈,管理导航抽屉都变得很容易。它不像 NavigationExperimental 那么复杂, 很容易上手使用(我仅用了15分钟去理解它) ,并且需要我们处理的逻辑很少,因为大部分这个库已经替我们做了。它同样也支持 deep linking。

仓库地址:https://github.com/react-community/react-navigation

06 结语

RN 中的导航机制本来是一团糟,但是 react-community 做的很棒,最终给出了 React Navigation 这样一个长期解决方案。我在 App 中使用它也有一段时间了,它的简单易用和性能上的表现都让我觉得很满意 。目前它虽然只发布了第五个 beta 版本,但表现似乎比较稳定。 我也特别期待这个库以后的变化。


React Native 开发阵营