ReactNative项目升级避坑指南

简介: ReactNative项目升级避坑指南

众所周知,ReactNative的项目升级是一个老大难问题,相信经历过版本升级的老铁们,心中的酸(ku)甜(bi)苦(ha)辣(ha)的感觉记忆犹新。

因为ReactNative项目升级设计到Android项目,IOS项目以及Javascript项目三方面的修改,处理起来还是很麻烦的,经常是解决一个报错又出来一个新的报错,红色的报错框仿佛在一直提示升级的困难重重。

针对棘手的ReactNative升级问题,Facebook团队也给出了两种方式帮助开发者进行项目升级:

  • 使用React Native CLI的update命令的方式来自动升级
  • 使用Upgrade Helper帮助网站辅助开发者手动进行项目升级


使用React Native CLI


1.使用update命令升级

react-native upgrade 升级最新稳定版本
or
react-native upgrade 0.61.0-rc.0 // 命令后跟具体版本号,升级至指定版本

2.处理冲突文件

升级后Android或者iOS项目文件,可能会产生冲突文件,需要进行解决。微信图片_20220610104409.png

Upgrade Helper(升级帮助网站)


1.打开Upgrade Helper网站后,会出现如下页面:微信图片_20220610104444.png

左边选择你当前项目的版本号, 右边选择你想要升级的目标版本号,选择后,点击Show me how to update蓝色按钮。

2.在上述操作完成之后,就出现了如下的类似的很多文件内容:微信图片_20220610104517.png

上面生成的文件改动内容,是Upgrade Helper基于一个完全初始化的基础React Native项目通过使用 rn-diff-purge, react-diff-view and create-react-app.产生的升级文件改动内容,在实际项目升级中还是要项目需要修改文件。


总结


虽然ReactNative项目的升级工作存在坑多,处理起来比较麻烦的问题,但是通过借鉴参考官方提供的升级指导,还是可以顺利的进行完成版本升级的。


可能遇到出现的问题


上周尝试升级自己的一个ReactNative Demo项目,在升级完成之后,无法进行debug调试,报错:Unable to resolve module `./debugger-ui/debuggerWorker.js` from

解决方案:

watchman watch-del-all
react-native start --reset-cache

其他


升级过程中,可能会遇到缓存导致问题,给大家整理了一些有用的命令来处理:

  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && yarn install`.
  3. Reset Metro Bundler cache: `rm -rf $TMPDIR/react-*` or `npm start -- --reset-cache`. 
  4. Remove haste cache: `rm -rf $TMPDIR/haste-map-react-native-packager-*`.

大家在升级中遇到什么问题,欢迎大家在评论区或者我的公号后台留言,一起讨论一下。

目录
相关文章
|
前端开发 JavaScript 小程序
7 款最棒的开源 React UI 库测评 - 特别针对国内使用场景推荐
优秀的 React UI 组件库,帮我们节省开发时间,提高开发效率,统一设计语言。更棒的是内置的功能复杂,我们自己很难处理的常用组件,比如表格、表单、富文本编辑器、时间日期选择器、实时拖拽组件等,再进一步,还有帮我们把组件的轮子装好的 React admin 后台管理系统。本文推荐 7 款适用于中文使用者习惯的开源 React UI 库,特别针对国内使用场景推荐。
|
6天前
|
监控 安全 前端开发
《VitePress 简易速速上手小册》第10章 维护与更新(2024 最新版)
《VitePress 简易速速上手小册》第10章 维护与更新(2024 最新版)
15 2
|
6天前
|
安全 测试技术 持续交付
《VitePress 简易速速上手小册》第8章 安全性与部署(2024 最新版)
《VitePress 简易速速上手小册》第8章 安全性与部署(2024 最新版)
18 0
|
存储 JavaScript 搜索推荐
《VitePress 简易速速上手小册》第3章:主题定制与扩展(2024 最新版)
《VitePress 简易速速上手小册》第3章:主题定制与扩展(2024 最新版)
22 0
|
1月前
|
运维 监控 安全
应用研发平台EMAS常见问题之sophix ios flutter热更新如何解决
应用研发平台EMAS(Enterprise Mobile Application Service)是阿里云提供的一个全栈移动应用开发平台,集成了应用开发、测试、部署、监控和运营服务;本合集旨在总结EMAS产品在应用开发和运维过程中的常见问题及解决方案,助力开发者和企业高效解决技术难题,加速移动应用的上线和稳定运行。
77 0
|
1月前
|
弹性计算 Java 关系型数据库
ARM架构和避坑指南|开发者分享会
今天分享的内容来自阿里云倚天ECS高级架构师张先国的“ARM架构和避坑指南”。本文内容主要从ARM架构、C和Java如何避坑 、等方面详细讲解。
|
2月前
|
移动开发 小程序 IDE
【社区每周】小程序基础库1.0版本不再维护(2022年9月第一期)
【社区每周】小程序基础库1.0版本不再维护(2022年9月第一期)
23 1
|
JavaScript Python Windows
Appium无痛享受!
Appium无痛享受!
111 0
Appium无痛享受!
|
存储 Java 关系型数据库
从零到完成安卓项目实战【安卓端+后端】
因为平时自己喜欢打篮球,那就开发一个篮球相关的系统吧:NBA安卓系统。
134 0
从零到完成安卓项目实战【安卓端+后端】
|
Web App开发 JavaScript 测试技术
技术分享 | 学做测试平台开发-Vuetify 框架
技术分享 | 学做测试平台开发-Vuetify 框架