记录一次React Native版本升级过程

466 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第27天,点击查看活动详情

背景说明

公司有一个比较老的项目,是使用的react-native@0.59.9最近发现有性能问题不停切换页面会导致系统内存急剧升高最终会卡死,通过分析代码推测是react-navigation@^1.0.0-beta.17这个组件的原因。尝试升级react-navigation至一个离beta版最近的稳定版react-navigation@1.0.0, 发现问题还是存在,就打算干脆升级React Native至6.3。

解决思路

百度查了下react-native升级,大多都推荐的是官方推出的升级助手,升级助手会例举项目中所有需要修改的地方,但是我这个项目依赖太多,不是只升级react-native就行。所以换了一种思路,先构建一个空的项目,在空项目中将所有需要的依赖都先安装进来,再将源码替换到空项目中。

过程中碰到的问题

  • 依赖版本不兼容,组件的依赖会相互影响,由于react-native是中间层解析js,react-native版本升级之后中间层也有升级,组件依赖的react-native版本不一致会导致最终编译成安卓应用程序这一步出现各种莫名其妙的问题。

通过npmjs官网找到依赖包的官方文档,查看官方文档上面描述的依赖关系,对应安装即可。 需要注意有的依赖已经改版,或很久没有更新,需要仔细观察版本。

例如react-navigation最新版本是4.4.4,但是对应的官网打开默认是6.0版本说明,但是查看安装说明会发现名称变了,原来是从4.x之后就修改了依赖名称。 image.png

  • 版本升级之后组件名称变化

版本变化文档会相应说明,废弃仓库通常也会推荐一个替代的库。

例如ListView在0.60之后改为FlatList,ViewPagerAndroid迁移至react-native-pager-view库,且导出名称已改为PagerView

如果想只改引用不改逻辑代码可以使用别名

import ViewPagerAndroid  from 'react-native-pager-view'

import后的名称就是别名。

  • 升级之后api发生变化

这种就没什么地方可以简化了,照着api修改原有代码吧

例如react-navigation,升级之后

1.0.0代码

import {
   StackNavigator
} from 'react-navigation';

4.4.4代码

import {
   createAppContainer
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

4.4.4中需要先通过createStackNavigator创建路由,再使用createAppContainer包裹创建的路由。

ps:一定要看官方文档或github,只有这里的信息才是最准确的。

参考资料

juejin.cn/post/686509…

react-native-community.github.io/upgrade-hel…

www.npmjs.com/