前言
前面一直使用React Navigation的v3版本，目前打算升级版本到v4，Api变动比较大，特此记录下(为了方便，下面<font color='red'>RNN</font>简写表示React Navigation)
本文不涉及到具体的集成过程，因为官方的教程已经非常详细了，只是列出v3升级到v4的差异点
ps：由于RNN中的原生依赖库涉及到androidX，建议将React Native升级到0.60以上才升级
过程
1.引用的原生库多了
在v3版本中,RNN之中依赖的原生库只有react-native-gesture-handler,在v4版本中，新增了如下的原生库
注意该库需要android原生
android/app/build.gradle添加:
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
<hr style="border:1px dashed #333; height:1px">
虽然看起来变得很繁琐，其实集成这些库绝对是一个好事,特别是react-native-gesture-handler和react-native-reanimated,目前和将来，很多RN的高性能组件很大可能均会依赖其一或者全部
<hr style="border:1px dashed #333; height:1px">
除了这上面4个原生库之外，在v4版本中官方将所有的navigator全部拆分出来了
<font color='red'>stack:</font> https://github.com/react-navigation/stack
<font color='red'>tabs:</font> https://github.com/react-navigation/tabs
<font color='red'>drawer:</font> https://github.com/react-navigation/drawer
<hr style="border:1px dashed #333; height:1px">
stackNavigator一般情况下，必会使用，该库也有一个原生依赖
小结: 升级到v4版本，除了react-native-gesture-handler在v3版本已经存在，还需要新增4个原生依赖库，另外需要引用react-navigation-stack
官方教程:
2.api变化
改变原生库后，直接运行，会报错，有下面几处api需要变更
2.1 createStackNavigator变为从react-navigation-stack中引用
v3:
import {
createStackNavigator,
Header,
} from 'react-navigation';
v4:
import {CardStyleInterpolators, createStackNavigator, Header} from 'react-navigation-stack';
2.2 Interpolators引入变化和使用变化
如果有需要改变页面跳转的动画效果，需要引入Interpolators，v3的引入方式
v3:
import StackViewStyleInterpolator from 'react-navigation-stack/lib/module/views/StackView/StackViewStyleInterpolator';
v4: 位置和名称(StackViewStyleInterpolator -> CardStyleInterpolators)均变化了
import {CardStyleInterpolators, createStackNavigator, Header} from 'react-navigation-stack';
用法也变化了:
v3: 根据routeName可以自定义每个页面的跳转动画
const AppNavigation = createStackNavigator(
,
{
transitionConfig: () => ({
screenInterpolator: props => {
const last = props.scenes[props.scenes.length - 1];
// Transitioning from search screen (goBack)
if (['YZVideoPlayerPage','HomeSearch'].indexOf(last.route.routeName)>=0) {
return StackViewStyleInterpolator.forFadeFromBottomAndroid(props);
}
return StackViewStyleInterpolator.forHorizontal(props);
},
}),
}
)
v4: 直接可以配置每个页面navigationOptions的cardStyleInterpolator
ProfileSetting: {
screen: ProfileSetting,
navigationOptions: {headerTitle: '设置', cardStyleInterpolator:(props)=> CardStyleInterpolators.forHorizontalIOS(props)},
},
当然依旧可以设置全局的，譬如设置android/ios的跳转动画一致:
const AppNavigation = createStackNavigator(
,
{
defaultNavigationOptions: () => ({
cardStyleInterpolator: (props)=> CardStyleInterpolators.forHorizontalIOS(props)
}),
}
)
2.3 部分header属性发生变化
|原名称|原位置|现名称|现位置|用法|
|-- |-- |-- |-- |-- |
|headerLayoutPreset|createStackNavigator的第二个参数的根节点|headerTitleAlign|createStackNavigator的第二个参数的defaultNavigationOptions属性的根节点|设置标题的对齐方式，android默认左对齐，ios默认居中对齐|
|header:null|createStackNavigator的第二个参数的defaultNavigationOptions属性的根节点|headerShown:false|createStackNavigator的第二个参数的defaultNavigationOptions属性的根节点|隐藏header|
|gesturesEnabled|createStackNavigator的第二个参数的defaultNavigationOptions属性的根节点|gestureEnabled|createStackNavigator的第二个参数的defaultNavigationOptions属性的根节点|设置右滑返回手势|
|transitionConfig|createStackNavigator的第二个参数的defaultNavigationOptions属性的根节点|已移除,可以根据#2.2进行设置|无|设置页面的跳转动画|
另外cardShadowEnabled、cardOverlayEnabled、cardStyle、headerBackTitleVisible、onTransitionStart onTransitionEnd,全部从createStackNavigator的第二个参数的根节点移动的到createStackNavigator的第二个参数的defaultNavigationOptions属性的根节点
headerTitle、headerLeft、headerRight、headerBackground、backImage全部从Element改为()=>Element,譬如
v3:
headerLeft: leftView,
v4:
headerLeft: ()=>leftView,
小结: 上面列出了大部分的变更，具体所有的变更，可以查看
https://github.com/react-navigation/stack/blob/master/src/utils/validateDeprecatedConfig.tsx
https://github.com/react-navigation/stack/blob/master/src/utils/validateDeprecatedOptions.tsx
