跳转到主要内容

React Navigation 遇见原生

·3 分钟阅读
Michał Osadnik
Michał Osadnik
核心团队

React Navigation 正在稳步迈向新的阶段,我们非常激动地向大家宣布 React Navigation 代码库中正在发生一些伟大的事情。

使其自定义

从 React Navigation 的最初开始,我们就一直遵循着一个重要的座右铭,即让导航体验在每个细节上都可自定义。我们,前端工程师、移动开发者和用户体验爱好者,都深切需要对每个布局组件做出决策。

在这一理念的指导下,我们(好吧,不一定是“我们”,因为这次我甚至没有写一行代码 😄)做出了架构决策,这对于具有原生背景的开发者来说可能存在争议。

我们决定仅使用 JavaScript 编写 React Navigation,以复制原生动画和交互。这是使我们的解决方案与其他 React Native 导航库(如 Wix 的 React Native Navigation 或 Graham Mendick 的 The Navigation Router)非常不同的主要决策。

但是……为什么?重新发明轮子的目的是什么?

首先,因为 JavaScript 实现可以更加自定义。它易于维护和开发新功能。此外,独立于原生代码使我们的代码库更加可靠。

此外,它不仅对维护者来说很容易,对使用我们库的开发者来说也很容易。无需原生设置使得开始开发和与现有(例如,棕地)应用程序集成变得非常简单。最终,非常广泛的自定义选项使其成为对具有非常高 UX 要求的开发者的绝佳解决方案。

以上原因使得 React Navigation 在众多开发者中非常受欢迎,但是……

经过多年的发展,我们需要承认,我们并不总是能够提供完全像原生一样的体验,尤其是在堆栈导航方面。我们还看到大量用户仅使用 React Navigation 提供的一些自定义方式……

原生展现

……因此,我们决定导出原生堆栈(Android 上的 FragmentTransaction 和 iOS 上的 UINavigationController),以便提供更好的体验。

感谢 Krzysztof Magiera 在 React Native Screens 库上的出色工作,现在我们可以使用真正的原生组件,而不是 JS 副本。

Native Stack on Android Native Stack on iOS

我们相信您会在您的项目中使用它,并强烈建议您熟悉我们的 文档。我最兴奋的是 iOS 头部动画!

请注意,我们不打算让这个组件成为当前现有堆栈的直接替代品。使用基于 JavaScript 的堆栈有很多好处。此外,原生堆栈的自定义范围非常有限,并且由于原生 API 的限制,可能不会变得更广。

原生堆栈在新的 5.0 alpha API 中可用,并且在 Satyajit 的帮助下,我设法在几天前发布了该库的第一个版本。它处于 alpha 阶段,所以不要期望一切都是完美的,但是……请随时提交 PR 并帮助我们发展 React Navigation!