React Native:我应该使用哪个导航器? [关闭]
Posted
技术标签:
【中文标题】React Native:我应该使用哪个导航器? [关闭]【英文标题】:React Native: Which navigator should I use? [closed] 【发布时间】:2017-02-19 23:28:09 【问题描述】:我必须在 3 个月内构建一个相对较大的跨平台(ios 和 android)应用程序。
到目前为止,在 React Native 方面,我只有 NavigatorIOS
的经验。现在,虽然我从未真正遇到过任何问题,但我从未见过有人推荐使用它。
其他选项是Navigator
,这看起来很简单,但可能不允许太多原生 UI 支持?还有NavigatorExperimental
,我对此一无所知,光是这个名字就让我很担心。我不想在最后一刻做噩梦。
我计划用一个月的时间彻底学习 React Native,然后用 2 个月的时间构建应用程序。
这引出了我的问题:如果你必须在 React Native 中构建一个跨平台应用程序,你会为每个平台使用哪个导航,为什么?
非常感谢任何答案或提示。
【问题讨论】:
我只有使用Navigator
的经验,结果证明它很简单,而且到目前为止我都做了我需要的。但是,我只有一个非常简单的导航堆栈,来回简单。这就是我可以分享的所有内容,因为我还没有尝试过其他导航器。看过github.com/wix/react-native-navigation?
我看了一下,它似乎不支持最新版本的 RN,这很遗憾。虽然仍然是一个可能的竞争者
截至今天,official docs suggest 使用react-navigation
、react-native-navigation
或native-navigation
。后两个是原生解决方案,第一个是基于 JS 的解决方案。
当心github.com/react-community/react-navigation,在Android上性能很差
【参考方案1】:
回答我自己的问题,因为我已经对那里的不同选项进行了大量研究,并亲自尝试了所有主要选项。
新编辑: 从今天(2021 年 12 月)开始,我建议使用 React Navigation v6。这是 Facebook 最推崇的社区解决方案。 V5 重写是一个完整的游戏规则改变者,并且远远优于以前的版本,V6 建立在它之上。大多数时候,易于设置和实现简单/复杂的堆栈是轻而易举的事。
如果这不适合您,另一种选择是 wix 的 react-native-navigation(不幸的是与 expo 不兼容)。
密切关注airbnb的native-nagivation。它们已经处于测试阶段一段时间了,并且最近没有向项目推送太多内容,所以我仍然建议使用 React Navigation 作为产品。 (编辑:避免 - 这个项目一直是dropped。)
原帖如下:
TLDR: 直到今天(2017 年 13 月 1 日),我仍然强烈建议 React Native Router Flux。 ex-navigation,Exponent 是一个不错的选择。
我一直在我的项目中使用 RNRF,到目前为止它非常完美。出色的导航栏和堆栈自定义(这对我来说很重要)并且易于与其他软件包集成。
加长版:(编辑:现已过时)
Navigator: 要避免。 不详细说明原因,Facebook 已经放弃它并且不再维护它的事实对我来说是选择另一个导航的足够大的理由。
NavigatorIOS:顾名思义,仅在 IOS 上可用,如果您要使用跨平台应用程序,这不是很好。在堆叠方面有几个不同之处,对我来说,这比 FB 想要的整个 'learn once, write anywhere' 还要好。 话虽如此,如果您的 iOS 应用程序的导航不是太复杂,并且您不需要太多的导航栏自定义,这是一个很好的选择,它利用了原生 UIKit 导航,因此会自动呈现带有后退按钮和标题的导航栏。
NavigationExperimental: 不要像我一样被它的名字吓到。 NavigationExperimental 对导航堆栈有很多控制,并允许更轻松的状态管理。不包括第 3 方库,这是转到导航选项。
Ex-Navigation:我只引用 Facebook 的 Eric Vicenti,他是 React Native 团队的成员:
如果您对更命令式的方法感兴趣,您可以在哪里 一种 make 方法调用以在整个应用程序中导航 方式类似于以前的导航器,那么我肯定会 推荐 ExNavigation。我们正在与 Exponent 密切合作 所以这些事情不会以危险的方式分道扬镳。
React Router Native:文档说明了一切。我只能说,如果你习惯了 React Router,这可能适合你。
关注:React Native Navigation by WIX。看起来很不错,但考虑到它有点落后于 latest 版本的 react native (在写这个答案时),我还没有尝试过。
有趣的 RN Nav 内容如下:
React Native — Which Navigator should I use?
First look: React Native Navigator Experimental Part 1
【讨论】:
截至今天React Native Navigation 支持使用react-native
0.43 及更高版本的项目。
“一旦稳定,NavigationExperimental 将被弃用,取而代之的是 React Navigation。React Navigation 是来自 Facebook、Exponent 和整个 React 社区的人们之间的协作。” react-navigation 现在是官方 Navigator 库 github.com/react-community/react-navigation
不要使用 React Navigation,它是我用过的最糟糕的库之一。这里有一些问题:github.com/react-community/react-navigation/issues/2031 我建议使用 React-native-navigation (wix),它使用原生屏幕和过渡,而且更简单/更实用。【参考方案2】:
您可以使用Ex-Navigation,它建立在NavigationExperimental
之上,同时支持iOS 和Android。另外,它有一个路线导航系统,并正确支持Android返回按钮。
如果您想继续使用 Navigator
javascript 组件,我已经构建了 react-native-navigator-wrapper
,它是对 Navigator
API 的简单包装,支持最常见的导航模式,如推送、弹出和模式。
【讨论】:
前导航很棒! 200 期,4 个月未更新。不用了。【参考方案3】:我一直在使用react-native-router-flux,它非常灵活。你可以检查一下。
【讨论】:
这是一个非常古老的项目,作者甚至都没有提到。【参考方案4】:React Navigation,这个领域的一个新项目。就我个人而言,我发现它比不再维护的 React Native Router Flux 更好。
React Navigation 有很多优秀的特性和适当的文档。它的受欢迎程度正在迅速增长。 AFAIK,React 核心开发者社区的人支持这个项目。看看这个,你可能会喜欢它。
编辑:React Navigation 现在是官方导航库。
【讨论】:
React Navigation 很糟糕,不要使用它:github.com/react-community/react-navigation/issues/2031 对于阅读本文的任何人,我的建议是使用 Wix Navigation,它更好,易于使用,具有 React 中缺少的基本功能导航并且有一种原生的感觉。 Wix 导航仍在实施他们的 2.0 版本,而且还没有到来。 React Navigation 现在是官方导航库。 仅仅因为它是“官方的”并不意味着它很好。这是我用过的最糟糕的库之一。 React-navigation 是一种不使用原生动画的廉价替代方案。 Wix 更好,它不会跳过原生性,也不会遇到性能问题和缺少基本的路由器功能。 就我个人而言,我发现它比其他现有选项(包括反应本机路由器通量)要好得多。它解决了我的问题。我同意,很少有事情难以实施。【参考方案5】:RN 库每天都在问世。在最近像你这样的类似情况下,为了简单起见,我的选择是坚持使用 router-flux,直到原生 wix 库开始支持更新的 RN 版本。 (我记得,没有提到各种人参与的问题,所以它非常活跃)。RN 是基于组件的,在此过程中很容易实现更改。所以不要像你现在已经做出明确的选择那样固执己见:)
【讨论】:
【参考方案6】:我只用过React Router Native,从来没有遇到过任何问题。
【讨论】:
【参考方案7】:有一个新项目React Navigation 用于易于使用的导航器。 Facebook、Exponent 和 React 社区支持该项目。
【讨论】:
你对这与 wix 的react-native-navigation
相比有何建议?以上是关于React Native:我应该使用哪个导航器? [关闭]的主要内容,如果未能解决你的问题,请参考以下文章
哪个 Firebase javascript 包应该与 React Native 一起使用?常规的“Firebase Web SDK”还是“react-native-firebase”?