ReactNative 升级步骤简要(后期持续更新中)

RN版本升级终极绝招



下面叙述下我的项目积分商城从ReactNative 从0.41.2 升级到0.49.5 步骤。因为中间幅度挺大。所以遇到的坑也特别多。借此机会。给大家阐述下我的遇到的坑。希望对大家有帮助。

1.先确定下你当前项目所用的npm 版本。一般较低的ReactNative 版本 处在4.0.5 .
我的项目是积分商城 之前用的是npm 4.0.5

2、再此 npm 全局先决条件下 ,使用react-native init 项目名 版本号。 因为我想要升级到RN版本0.49.5 所以我执行命令 react-native init Ex --version 0.49.5
3、项目初始化完以后。主要查看package.json文件。

这就是我初始化了一个项目中的package.json
经过和我项目中的package.json 文件对比后。发现确实遇到了不一样的问题。
首先是 react 版本不一样 其次 是 react-native 版本不一样。还有就是

这个也不一样。
4.好了知道上面不一样的结果了。下面就开始 实战吧。牛x
5、首先你必须把NodeModules包删除掉,切换到你项目当前目录下执行命令npm uninstall react --s --o --d 删除你当前项目所依赖的react 执行完以后。你会惊奇的发现 package.json里没有react 了。
6、接下来用命令npm install react@指定版本号(就是你初始化参考项目) --save
7、继续执行命令 npm uninstall react-native --s --o --d删除你当前项目所依赖的react -native执行完以后。你会惊奇的发现 package.json里没有react-native 了。
8、接下来用命令npm install react-native@指定版本号(就是你初始化参考项目) --save
9、完成以后在当前项目目录下使用react-native --version 查看下你当前项目的版本是不是已经改为0.49.5了。 
10、接下来还是一样 使用npm uninstall --s --o --d babel-jest
babel-preset-react-native
jest
react-test-renderer
删除成功后继续执行安装命令 npm install babel-jest babel-preset-react-native jest --dev
执行完以后。接下来就是用npm install 进行安装。
安装成功后。

以上步骤大概在百度、知乎、等搜索引擎受都有所述。结果以为就拜拜了。 我只想说 坑的一笔。害苦了我们。
不得已才发现ReactNative 官网就有接下来的叙述更新步骤。
首先你必须安装好git ,配置好环境变量。 
https://reactnative.cn/docs/0.50/upgrading.html
1. 安装Git
你需要安装Git,但这并不要求你自己使用Git去管理项目。只是我们的更新过程会使用到Git罢了。你可以在这里下载安装Git,注意要把git的路径添加到PATH变量中。
2. 安装react-native-git-upgrade工具模块
$ npm install -g react-native-git-upgrade
react-native-git-upgrade提供了豪华的一条龙自动合并更新流程,主要包含两个服务:
首先它会利用Git工具计算新旧版本文件间的差异并生成补丁
然后在用户的项目文件上应用补丁
3. 运行更新命令
$ react-native-git-upgrade# 这样会直接把react native升级到最新版本
# 或者是:

$ react-native-git-upgrade X.Y.Z# 这样把react native升级到指定的X.Y.Z版本。
按照上述步骤。最终执行react-native-git-upgRade 0.49.5 命令。这个命令大概会花费5分钟的时间,请大家耐心等待。直到显示 git upgragde  info 就好了。 在官网上阐述说有可能需要人工介入。不过我没有遇到。
这是你的项目整体架构已经基本成功升级到0.49.5 了。但是,别高兴的太早了。还有坑。
当你把项目运行起来以后。他会报一些string,number can’t find 这时候。就要修改下。
报错的文件。Import PropTypes from ‘prop-types’ 就可以解决。如果当前项目有了PropTypes 就把它删除掉了。因为新版本那个已经被遗弃了。
别高兴的太早。还有可能就是 class 报错。因为低版本他会这样写 var output=React.creatClass({})  所以你要手动改为 export default class extends Component{}
好了项目构建完成成功了。
以上就是我把积分商城从0.41.2升级到0.49.5 的方案。希望大家借鉴 。
升级幅度大。最后环节改动的花费时间就长些。比较小。就改动少。因为我的项目升级幅度大。总共安装了22个库。就改动了10个。
这或许是react-native-git-upgrade 更新不彻底的缘故。需要自己修改下。就ok.



好了 。项目运行起来了。真棒!

猜你喜欢

转载自blog.csdn.net/qq_21937107/article/details/83859633