React Navigation 与 React Native 导航

React Navigation vs. React Native Navigation

React Native Navigation 和 React Native 这两个主要的 React Native 导航解决方案之间的技术差异是什么?

是否存在特定的技术限制,需要使用一个而不是另一个?

一个比另一个使用更广泛吗?

新编辑: 从今天 (07/2020) 开始,我建议使用 React Navigation v5。这是 Facebook 最推的社区解决方案。 V5 重写彻底改变了游戏规则,远远优于以前的版本。易于设置和实施 easy/complicated 堆栈在大多数情况下都是轻而易举的事。

如果这不适合您,另一种选择是 react-native-navigation WIX(不幸的是与 expo 不兼容)。


React Native Navigation 顾名思义,使用了带有 JS 桥接的原生模块,所以性能 will/may 会更好。这需要本机集成。

React Navigation是react native本身提供的简单而强大的解决方案。它是一个全 JS 实现,不像其他使用本机支持的实现可能很棘手。只需 npm-install 就可以了...

如果您更喜欢所有 JS 实现,请使用 React 导航;如果您的最高优先级在于 性能,请使用本机导航。

  • 两个库都发生了翻天覆地的变化,进入了下一个稳定版本。 react-navigation 现在更加稳定和高效。如果你必须在 js 中处理复杂的计算,请使用 react-native-navigation。但在大多数情况下,react-navigation 会为你工作!
  • 随着react-native-screens, the native screen optimisation is brought possible to react-navigation by bringing the native navigation component (UIViewController for iOS, and FragmentActivity for Android) Refer here
  • 的到来

对于那些从用户体验角度来看的人来说,两者都提供了几乎相同的动画和流程,因此您不知道幕后使用的是什么库。 主要区别在于原生端可以提高性能(这对于更好的用户体验至关重要)

这两个库都是 React Native 的最佳导航解决方案。根据你的need/preference.

使用

通过使用本机控制器包装每个屏幕,使用本机导航来响应本机导航。所以性能是由原生领域优化的。您要实施的区域在 header 和标签栏内。

React Navigation是纯js实现。它使用 React-native 根视图作为容器视图。每个屏幕都在根视图层次结构树下。

所以如果你从 View Hierarchy 控制台打开应用程序,你会看到一个很大的不同(React Navigation 包括一堆奇怪的组件,比如多个 headers 或标签栏,树也很难理解).

你应该 the Navigation router 试一试。它提供了两全其美的优势:iOS 和 Android 上的 100% 本机导航以及本机屏幕堆栈的 JavaScript 数组表示。