跳到主要内容

React Navigation 7.0 发布候选版

·4 分钟阅读
Satyajit Sahoo
Satyajit Sahoo
核心团队

我们很高兴地宣布 React Navigation 7.0 的发布候选版。

此版本包含一个新的静态 API，它简化了导航器的配置，并改进了 TypeScript 和深度链接的支持。以及各种其他改进和新功能。

您可以在升级指南中阅读完整的更改列表。以下是一些亮点

亮点​

静态 API​

新的静态 API 是一个可选的 API，它简化了导航器的配置，并使 TypeScript 和深度链接的使用更加容易。

它遵循与动态 API 相同的原则，但不是使用函数定义屏幕，而是使用配置对象来定义它们，类似于 React Navigation 4

const Stack = createStackNavigator({
  screens: {
    Home: {
      screen: Home,
    },
    Profile: {
      screen: Profile,
    },
    Settings: {
      screen: Settings,
    },
  },
});

有关更多详细信息和示例，请查看介绍静态 API 的博客文章。

预加载屏幕​

许多导航器现在支持在导航到屏幕之前预加载屏幕。这有助于通过预加载用户可能接下来导航到的屏幕来提高应用程序的感知性能。预加载屏幕将在屏幕外渲染它并执行其副作用，例如数据获取。

要预加载屏幕，您可以使用导航对象上的 preload 方法

navigation.preload('Details', { id: 42 });

底部标签页导航器现在支持通过将 tabBarPosition 选项指定为 'left' 或 'right' 来在侧面显示标签页。这将使构建响应式 UI 更加容易，您可以在较小屏幕上在底部显示标签页，并在较大屏幕上切换到侧边栏。

Sidebar support in Bottom Tab Navigator

底部标签页导航器中的动画支持​

底部标签页导航器现在支持在选项卡之间切换时的动画。您可以使用 animation 选项自定义动画。

react-native-drawer-layout 包​

在 @react-navigation/drawer 中使用的抽屉实现现在作为一个独立的包 react-native-drawer-layout 提供。这使得即使您不使用 React Navigation，或者如果您想在没有导航器的情况下使用它，也更容易使用抽屉实现。

您可以使用以下方式安装它

npm install react-native-drawer-layout@next

有关用法，请参阅 react-native-drawer-layout。

试用一下​

如果您想试用一下，请将 @next 添加到您正在安装的软件包中。例如

npm install @react-navigation/native@next @react-navigation/bottom-tabs@next

这是在最终版本发布之前试用并提供反馈的最佳时机。如果您遇到任何问题或有任何反馈或建议，请在 GitHub issues 或我们的 GitHub Discussions 论坛上告知我们。

特别感谢​

我想向所有为此次发布做出贡献的贡献者表示衷心的感谢。你们的贡献使 React Navigation 变得伟大。

我想特别感谢 Michał Osadnik，感谢他为此次发布中的许多功能和改进所做的工作，并提供了非常需要的动力。

非常感谢 Software Mansion 的 Patrycja Kalińska 帮助编写文档。

我也要感谢 React Native Screens 的 Tymoteusz Boba 和 Kacper Kafara。没有 React Native Screens，React Navigation 就不会有今天的成就。

最后但并非最不重要的一点，如果没有 Callstack 的专门时间，维护和改进 React Navigation 将是不可能的。

如果 React Navigation 帮助您为客户交付价值，如果您能赞助我们，那将意义重大。赞助将帮助我们更快地朝着构建最佳跨平台导航库的目标迈进，并继续为 GitHub issues 中的错误报告提供及时的支持。

👉 访问我们的 GitHub 赞助页面 👈