跳到主要内容

2.0 发布候选版

·5 分钟阅读
Brent Vatne
核心团队

在 React Navigation 1.0 发布整整两个月后,我们即将发布另一个主要版本。我们想邀请使用该库的开发者在你的应用中试用发布候选版,并告知我们你是否遇到任何问题。

yarn add react-navigation@^2.0.0-rc.1

2.0 的文档可在 reactnavigation.org 上找到

我们提升了主版本号,因为此版本中的某些更改是向后不兼容的。 尽管如此,这应该是一个相当容易的升级。 我们正在逐步改进 React Navigation,因为我们不想让开发者感到被困在旧版本中。 如果你以传统方式使用 React Navigation 并且没有任何自定义导航器,我无法想象这次更新会花费你超过一个小时的时间。

这篇博文不是完整的更新日志 - 完整的更新日志将在 2.0 正式发布时发布; 以下是重大更改列表、关于如何更新你的应用以适应这些更改的建议、弃用通知以及我最喜欢的一些新功能。

重大更改

在 1.x 中,navigate(routeName)push(routeName) 非常相似:每次你调用 navigate(routeName) 时,无论如何它都会将新路由推入堆栈。 现在,navigate(routeName) 将首先尝试查找路由的现有实例,如果存在则跳转到该实例,否则它会将路由推入堆栈。

要更新你的应用以适应此更改,你可能需要在每次想要推送新路由的地方将 navigate 更改为 push。 或者,你可以考虑使用 keynavigate({routeName: ‘MyRoute’, key: data.uniqueId, params: data})阅读更多关于使用键进行导航的信息

RFC 4 中阅读更多相关信息。

push 现在像 navigate 一样在路由器之间传播

以前,push 仅适用于最深层的活动堆栈路由器。 这意味着如果你有 Stack A > Stack B 并且 Stack B 触发了 push('MyRoute'),即使 Stack B 没有名为 'MyRoute' 的路由而 Stack A 有,屏幕也不会被推送。 我们做出此更改是为了适应“不再那么强推”的 navigate 行为。

更新你的应用时,你可能需要仔细检查你使用 push 的位置,以确保这不会影响你应用的预期行为。

浅层导航选项

对于使用 React Navigation 的开发者来说,常见的困惑来源是围绕 navigationOptions 解析。 例如,如果你有一个带有标题栏的堆栈导航器,以及在该堆栈内部的抽屉导航器,那么在某些情况下,每次你在抽屉中更改屏幕时,堆栈的标题都会更改。 这是因为堆栈导航器会爬入子导航器并从最深层的活动屏幕中拉取 navigationOptions。 从 2.0 开始,这种情况不再发生:导航器将仅在其直接子级中查找 navigationOptions。 在 RFC 5 中阅读更多相关信息。

用于创建导航器的新 API

这不会影响大多数用户,但如果你的应用中有任何自定义导航器,请继续阅读。 在 RFC 2 中阅读更多关于更改的信息。 另请阅读 自定义导航器文档

抽屉路由已被操作取代

现在你可以调用 navigation.openDrawer() 而不是使用 navigation.navigate('DrawerOpen') 打开抽屉。 其他方法包括 closeDrawer()toggleDrawer()

在 1.x 中,navigation 上的函数不是上下文相关的 - 无论你的屏幕是在抽屉导航器、堆栈导航器、标签导航器等内部,它们都是相同的。 在 2.0 中,navigation prop 上可供你使用的函数取决于它对应的导航器。 如果你的屏幕同时位于堆栈导航器和抽屉导航器内部,你将同时拥有两者的助手 —— 例如 pushopenDrawer

鉴于我们在 1.x 中仅公开了通用助手(navigategoBack)和特定于堆栈的助手,如果你尝试从堆栈外部使用堆栈助手,这将只会影响你。 例如,如果你有一个标签导航器,标签 A 中有一个堆栈,标签 B 中只有一个普通屏幕,然后尝试从标签 B 中的屏幕推送路由,则 push 将不可用。 如果你的应用遵循这种类型的结构,请在更新应用时记住这一点。

你从这获得的一大改进是,你现在可以将你自己的助手添加到 navigation prop! 在 RFC 6 中阅读更多相关信息。

弃用

以下 API 已弃用,将在 3.0 版本中移除。

XNavigator 现在命名为 createXNavigator

import { createStackNavigator } from ‘react-navigation’;
createStackNavigator({routeName: Screen});

做出此更改是为了提高学习和理解该库的容易程度。 导航器构造函数是返回组件 (HOC) 的函数,而这以前没有通过名称很好地传达出来。

TabNavigator 已被拆分为更专注的导航器

TabNavigator(现在根据上述内容为 createTabNavigator)是用户经常感到困惑的来源,因为它默认会在 iOS 上使用底部标签栏,在 Android 上使用顶部标签栏。 此外,某些配置属性应用于底部标签栏,而其他属性应用于顶部标签栏。 等效的组件现在是:createBottomTabNavigatorcreateMaterialTopTabNavigator。 我们还引入了一种新的标签导航器类型,createMaterialBottomTabNavigator - 一种基于 react-native-paper 的 Material Design 风格的底部标签栏导航器。 感谢 satya164 在这方面做出的杰出工作!

新功能亮点

  • 状态持久化 - 在应用重启时自动保存状态并重新加载。 请参阅 状态持久化文档
  • 现在,在 iOS 上,堆栈中带有标题栏和不带标题栏的屏幕之间的过渡会按预期进行动画处理。 #3821。 感谢 skevy
  • 如上所述,createMaterialBottomNavigator 是一种新的导航器类型,它提供了 Material Design 底部标签栏模式。