React Navigation 与 React Native Navigation [关闭]

Posted 2023-02-16

【中文标题】React Navigation 与 React Native Navigation [关闭]

【英文标题】：React Navigation vs. React Native Navigation [closed]

【发布时间】：2017-10-24 04:06:54

【问题描述】：

React Native Navigation 和 React Native 这两种主要的 React Native 导航解决方案有哪些技术差异？

React Navigation React Native Navigation

是否有特定的技术限制需要使用其中一种？

一种比另一种更广泛使用吗？

【问题讨论】：

值得查看官方文档：reactnative.dev/docs/navigation.html

【参考方案1】：

新编辑：从今天（07/2020）开始，我建议使用React Navigation v5。这是 Facebook 最推崇的社区解决方案。 V5 重写彻底改变了游戏规则，并且远远优于以前的版本。大多数时候，易于设置和实现简单/复杂的堆栈是轻而易举的事。

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

---

React Native Navigation 顾名思义，使用带有 JS 桥的本机模块，因此性能会/可能会更好。这需要原生集成。

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

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

两个库都发生了巨大的变化，并进入了下一个稳定版本。 react-navigation 现在更加稳定和高效。如果您必须在 js 中处理复杂的计算，请使用 react-native-navigation。但在大多数情况下，react-navigation 会为您工作！ 随着 react-native-screens 的出现，通过引入原生导航组件（ios 的 UIViewController，android 的 FragmentActivity）Refer here，为 react-navigation 带来了原生屏幕优化

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

这两个库都是 React Native 的最佳导航解决方案之一。根据您的需要/偏好使用它。

【讨论】：

考虑到React Navigation 今天仍然在beta 并且充满烦人的错误，还要考虑稳定性。对于我的担忧，我对React Navigation 感到非常失望，所以我会尝试React Native Navigation。是的，浪费时间……要是 Facebook 在离开 Navigator 之前给我们一点时间就好了……

react-native-navigation 很棒。 react-navigation 缺少非常关键的生命周期方法，例如 isFocused 或 onLeave。

isFocused 和其他生命周期方法/事件在 v2 上：reactnavigation.org/docs/en/with-navigation-focus.html#docsNavreactnavigation.org/docs/en/navigation-events.html#docsNav

答案没有提供任何关于用户体验是否存在相关差异的线索。更好的性能并不意味着用户可以感知到差异，所以我仍然不确定这些选项之间是否对用户有任何真正的差异，这就是我想知道的。

@optim1st 错了！您可以将 redux 与最新版本一起使用。确保您遵循说明示例 repo：github.com/victorkvarghese/react-native-boilerplate

【参考方案2】：

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

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

所以如果你从 View Hierarchy 控制台打开应用程序，你会看到很大的不同（React Navigation 包含一堆奇怪的组件，比如多个标题或标签栏，树也很难理解）。

【参考方案3】：

你应该试试the Navigation router。它提供了两全其美：iOS 和 Android 上的 100% 原生导航以及原生屏幕堆栈的 javascript 数组表示。