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添加:
     

2. implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
4. 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:
  

2. import {
4.     createStackNavigator,
6.     Header,
8. } from 'react-navigation';

复制代码

  v4:
  

3. import {CardStyleInterpolators, createStackNavigator, Header} from 'react-navigation-stack';

复制代码

  2.2 Interpolators引入变化和使用变化

   如果有必要改变页面跳转的动画效果，必要引入Interpolators，v3的引入方式
   v3:
  

2. import StackViewStyleInterpolator from 'react-navigation-stack/lib/module/views/StackView/StackViewStyleInterpolator';

复制代码

  v4: 位置和名称(StackViewStyleInterpolator -> CardStyleInterpolators)均变化了
  

3. import {CardStyleInterpolators, createStackNavigator, Header} from 'react-navigation-stack';

复制代码

  用法也变化了:

   v3: 根据routeName可以自界说每个页面的跳转动画
  

2. const AppNavigation = createStackNavigator(
4.     ,
6.     {
8.         transitionConfig: () => ({
10.             screenInterpolator: props => {
12.                 const last = props.scenes[props.scenes.length - 1];
14.                 // Transitioning from search screen (goBack)
16.                 if (['YZVideoPlayerPage','HomeSearch'].indexOf(last.route.routeName)>=0) {
18.                     return StackViewStyleInterpolator.forFadeFromBottomAndroid(props);
20.                 }
22.                 return StackViewStyleInterpolator.forHorizontal(props);
24.             },
26.         }),
28.     }
30. )

复制代码

  v4: 直接可以配置每个页面navigationOptions的cardStyleInterpolator
  

2. ProfileSetting: {
4.             screen: ProfileSetting,
6.             navigationOptions: {headerTitle: '设置', cardStyleInterpolator:(props)=> CardStyleInterpolators.forHorizontalIOS(props)},
8.         },

复制代码

  固然仍旧可以设置全局的，譬如设置android/ios的跳转动画同等:
  

2. const AppNavigation = createStackNavigator(
4.     ,
6.     {
8.         defaultNavigationOptions: () => ({
10.             cardStyleInterpolator: (props)=> CardStyleInterpolators.forHorizontalIOS(props)
12.         }),
14.     }
16. )

复制代码

  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:
  

2. headerLeft: leftView,

复制代码

  v4:
  

2. 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
         ©    著作权归作者所有,转载或内容合作请联系作者     

喜好的朋友记得点赞、收藏、关注哦！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。