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-*`.

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

目录
相关文章
|
8月前
|
并行计算 Ubuntu Docker
百度Apollo探索之旅:迈出第一步基础软件安装指南(文末赠送apollo周边)
百度Apollo探索之旅:迈出第一步基础软件安装指南(文末赠送apollo周边)
286 0
|
移动开发 前端开发 JavaScript
移动开发—Less基础与安装
移动开发—Less基础与安装
|
3月前
|
Web App开发 移动开发 前端开发
uniapp环境H5运行及发行(入门必学)
uniapp环境H5运行及发行(入门必学)
347 5
|
4月前
|
图形学 C++ C#
Unity插件开发全攻略:从零起步教你用C++扩展游戏功能,解锁Unity新玩法的详细步骤与实战技巧大公开
【8月更文挑战第31天】Unity 是一款功能强大的游戏开发引擎,支持多平台发布并拥有丰富的插件生态系统。本文介绍 Unity 插件开发基础,帮助读者从零开始编写自定义插件以扩展其功能。插件通常用 C++ 编写,通过 Mono C# 运行时调用,需在不同平台上编译。文中详细讲解了开发环境搭建、简单插件编写及在 Unity 中调用的方法,包括创建 C# 封装脚本和处理跨平台问题,助力开发者提升游戏开发效率。
406 0
|
5月前
|
开发工具 Android开发 iOS开发
从零开始学 Xamarin 开发,新手教程全攻略,安装环境、创建项目、设计界面,轻松开启开发之旅!
【8月更文挑战第31天】Xamarin是一种高效的跨平台移动应用开发工具,迎合了日益增长的移动应用需求。本文为Xamarin新手提供了一套详尽的入门指南,涵盖开发环境搭建、项目创建与配置、用户界面设计及功能实现等关键步骤。通过具体示例,帮助初学者快速上手Xamarin开发,开启移动应用创作之旅。
100 0
|
8月前
|
前端开发 JavaScript 开发者
探秘npm:解锁前端生态的魔法工具
探秘npm:解锁前端生态的魔法工具
120 0
|
7月前
|
前端开发 开发工具 git
[巨详细]使用HBuilder-X启动uniapp项目教程
【6月更文挑战第6天】使用HBuilder-X启动uniapp项目教程 先用HBuilder-X打开本地的uniapp项目
960 0
|
API iOS开发 MacOS
关于electron升级调研的心得笔记
关于electron升级调研的心得笔记
422 0
关于electron升级调研的心得笔记
|
前端开发
《智能前端技术与实践》——第1章 开发环境配置——1.5 使用 WebStorm
《智能前端技术与实践》——第1章 开发环境配置——1.5 使用 WebStorm
113 0
|
机器学习/深度学习 Python Windows
QPT打包工具(V1.0a7)心动初体验
为Windows而生的深度学习打包工具,致力于解决目前市面上打包工具,具有局限性,无法很好打包的缺点 优点:快狠准!解决疑难杂症!针对性很强,关键是真的很好用!
526 0
QPT打包工具(V1.0a7)心动初体验

热门文章

最新文章