2.0 发布候选版
在 React Navigation 1.0 发布整整两个月后,我们即将发布另一个主要版本。我们想邀请使用该库的开发者在你的应用中试用发布候选版,并告知我们你是否遇到任何问题。
yarn add react-navigation@^2.0.0-rc.1
2.0 的文档可在 reactnavigation.org 上找到
我们提升了主版本号,因为此版本中的某些更改是向后不兼容的。 尽管如此,这应该是一个相当容易的升级。 我们正在逐步改进 React Navigation,因为我们不想让开发者感到被困在旧版本中。 如果你以传统方式使用 React Navigation 并且没有任何自定义导航器,我无法想象这次更新会花费你超过一个小时的时间。
这篇博文不是完整的更新日志 - 完整的更新日志将在 2.0 正式发布时发布; 以下是重大更改列表、关于如何更新你的应用以适应这些更改的建议、弃用通知以及我最喜欢的一些新功能。
重大更改
StackNavigator 中的 navigate(routeName)
不再那么“强推”
在 1.x 中,navigate(routeName)
和 push(routeName)
非常相似:每次你调用 navigate(routeName)
时,无论如何它都会将新路由推入堆栈。 现在,navigate(routeName)
将首先尝试查找路由的现有实例,如果存在则跳转到该实例,否则它会将路由推入堆栈。
要更新你的应用以适应此更改,你可能需要在每次想要推送新路由的地方将 navigate
更改为 push
。 或者,你可以考虑使用 key
:navigate({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()
。
导航操作 API 全面改革
在 1.x 中,navigation
上的函数不是上下文相关的 - 无论你的屏幕是在抽屉导航器、堆栈导航器、标签导航器等内部,它们都是相同的。 在 2.0 中,navigation
prop 上可供你使用的函数取决于它对应的导航器。 如果你的屏幕同时位于堆栈导航器和抽屉导航器内部,你将同时拥有两者的助手 —— 例如 push
和 openDrawer
。
鉴于我们在 1.x 中仅公开了通用助手(navigate
、goBack
)和特定于堆栈的助手,如果你尝试从堆栈外部使用堆栈助手,这将只会影响你。 例如,如果你有一个标签导航器,标签 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 上使用顶部标签栏。 此外,某些配置属性应用于底部标签栏,而其他属性应用于顶部标签栏。 等效的组件现在是:createBottomTabNavigator
和 createMaterialTopTabNavigator
。 我们还引入了一种新的标签导航器类型,createMaterialBottomTabNavigator
- 一种基于 react-native-paper 的 Material Design 风格的底部标签栏导航器。 感谢 satya164 在这方面做出的杰出工作!