React Native框架升级0.60+

前几天公司React Native项目升级，发现0.50版本和0.60版本改变还是很大的，而且很多第三方的库也已经落后于最新版本比较多了。所以打算把原来的项目升级一下。我还是按照原来React Native框架探索学习笔记形势来写这篇文章，详细的说说升级过程和新的第三方库使用。

内容结构

依赖升级
JavaScript代码检测
- ESlint在VS Code下的配置
页面管理
- 底部导航
- 页面导航
- 切换导航
数据管理
- 全局数据管理
- 网络请求错误管理

依赖升级

我的升级方法比较笨。

npx react-native init MyTestApp创建一个新的项目
把里边的package.json复制到老的项目
去掉Link Binary With Libraries用到的React Native第三方库
yarn
pod install

这里边可能会遇到的问题和注意事项。去掉Link Binary With Libraries用到的React Native第三方库。只保留系统的。

老项目

如果遇到Swift相关报错。例如Auto-Linking library not found for -lswiftSwiftOnoneSupport类似这样的错误，可以通过创建Swift文件解决。具体可以查看It gives errors when using Swift Static library with Objective-C project。

JavaScript代码检测

与老版相比，新版的React Native为我们提供了@react-native-community/eslint-config。所以需要在.eslintrc.js文件中需要修改extends。

module.exports = {
  root: true,
  extends: '@react-native-community',
}

导航管理

在上次公司的项目升级中发现react-navigation已经到了V5, 而且写法也和之前有了很大的不同。

底部导航

const TabBarStack = () => (
   ({
      tabBarIcon: ({ focused }) => tabarIcons[route.name].render(focused),
    })}
  >
     ({
        tabBarLabel: '首页',
        tabBarVisible: route.state && route.state.index === 0 // ~注意~ 如果想实现隐藏Tabbar的功能需要进行此配置
      })} />
    
    
  
)

页面导航

详情页

const HomeStack = () => (
  
    
    
  
)

切换导航

这个是和之前的版本不一样的，在V5中去掉了createSwitchNavigator。所以实现起来有所不同。

const AppStack = ({ isLaunching }) => (
  
    {
      isLaunching ?
        
        : 
    }
  
)

const SwitchStack = ({ isLaunching }) => {
  return (
    
      
    
  )
}

最后

更多详细的代码大家可以看源码DLReactNativeArchitecture。不知道这个对大家有没有帮助，本人水平有限。写文章条理也不是太清晰，还有些名字写得也不是特别合适。如果大家对代码，对文章有什么问题，建议可以在评论留言。大家一起学习，一起进步。