基于配置的组件
在之前的版本中，我们创建一些导航路由，比如创建堆栈导航，底部Tab导航，都是采用的静态的配置navigationOptions选项来完成的。但是在React Navigation 5.0中是做了基于组件的动态配置的鑫的方式，和以前的版本完全不一样。
比如之前版本中创建一个堆栈导航的方式如下：
const Auth = createStackNavigator(
{
Login: LoginScreen,
Binding: BindScreen,
SelectFocusFiledScreen,
ProtocolAuth,
},
{
headerMode: 'none',
// transitionConfig: () => ({
// transitionSpec: {
// duration: 200,
// timing: Animated.timing,
// },
// }),
}
)
在 createStackNavigator的函数中第一个参数是配置我的路由页面，第二个参数是一些静态设置。
但是在React Navigation 5.0中的创建堆栈导航的方式却不一样，代码如下：
const HomeStack = createStackNavigator();
// 首页的路由栈
const HomeStackScreen = () => {
return (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={HomeScreen} options={{
title: '首页'
}} />
<HomeStack.Screen name="Detail" component={DetailScreen} />
</HomeStack.Navigator>
)
}
首先不一样的地方在于createStackNavigator这里是一个空参数的函数，如果你按照以前版本的方式传入参数的话，会有如下报错，提示你是不是在使用以前版本的API
在这里插入图片描述
加入Hooks
目前可用的hooks:
- useNavigation
- useRoute
- useNavigationState
- useFocusEffect
- useIsFocused
- useLinking
- useScrollToTop
通过组件更新设置
navigation增加了一个setOptions属性，以此来配置页面的导航配置，示例代码如下：
navigation.setOptions({
headerRight: () => (
<DoneButton
onPress={async () => {
await saveNote();
navigation.replace('Notes');
}}
/>
),
})
全新的主题(Theme)API
新版本重构了主题系统，方便用户自定义设置。新版本提供了一个theme对象来配置比如背景色等等。总体来说新版本对于配置导航器的主题更加简单明了。给出的示例代码如下；
const MyTheme = {
dark: false,
colors: {
primary: 'rgb(255, 45, 85)',
background: 'rgb(242, 242, 242)',
card: 'rgb(255, 255, 255)',
text: 'rgb(28, 28, 30)',
border: 'rgb(199, 199, 204)',
},
};
使用TypeScript重新构建React Navigation 5.0
TypeScript是当前js领域比较火的语言，比js更加严谨，也更加简洁，有心的读者朋友可以学习一下。
构建原生导航器
其他的改进
- 优化了drawer navigator
- 使用reset option 直接传递新的state
- 优化了页面焦点状态变化时，focus 和 blur事件的捕捉
- 集成了InteractionManager 来确保动画完成之后，页面才开始新的任务，比如网络请求等。
- 添加react-native-safe-area-context来更高适配当前的全面屏手机的安全区域。
旧版本升级
最后
好了，通过以上的说明总结，大家应该大体了解了ReactNative官方推荐的React Navigation最新版本的一些变化和特性，下一篇文章将通过一个具体的Demo来说明React Navigation 5.0具体使用，敬请期待。
欢迎大家关注我的公众号：君伟说。分享开发技术，职场故事和生活感悟，2020我们一起同行。