React Native之升级React Navigation v3-v4
前言前面一直使用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版本中，新增了如下的原生库
[*]react-native-reanimated
[*]react-native-screens
注意该库必要android原生android/app/build.gradle添加:
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
[*]react-native-safe-area-context
<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一样平常环境下，必会使用，该库也有一个原生依赖
[*]@react-native-community/masked-view
小结: 升级到v4版本，除了react-native-gesture-handler在v3版本已经存在，还必要新增4个原生依赖库，另外必要引用react-navigation-stack
官方教程:
https://reactnavigation.org/docs/en/getting-started.html
https://reactnavigation.org/docs/en/stack-navigator.html
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;
// 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
© 著作权归作者所有,转载或内容合作请联系作者
https://img-blog.csdnimg.cn/direct/67c64049147741939b85489caefbb597.png
喜好的朋友记得点赞、收藏、关注哦！！！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]