基于React-Native的项目升级（0.43.3|基于React-Native的项目升级（0.43.3 -> 0.54.0）基于React-Native的项目升级（0

因为跨越多个版本，版本变化很大，遇到大大小小很多问题，因此整理这个文档，来帮助梳理整个升级的流程

如果升级过程中遇到任何的问题，欢迎联系本人讨论

第一步 react-native 升级

先更新 react-native-git-upgrade 命令
npm install -g react-native-git-upgrade
运行 react-native-git-upgrade 命令更新，不指定版本的话会升级到最新版本
react-native-git-upgrade 0.54
如果有冲突请处理，到这里第一步结束

第二步第三方依赖升级

更新npm依赖库，因为React更新到v15.5之后，React.PropTypes被prop-types库代替，过去的代码可能是这样

'use strict'; import React from 'react' export default class SettleContractList extends Component { static propTypes = { data: React.PropTypes.array, } }

现在会是这样

'use strict'; import PropTypes from 'prop-types' export default class SettleContractList extends Component { static propTypes = { data: PropTypes.array, } }

如果第三方库已经完成了更新，我们只需要更新到最新版本就行，如下:

npm install react-native-vector-icons@4.5.0 --save

如果第三发库作者还没做好这部分的更新，只能自己手动修改了，建议建个私有npmjs库，发布上去，避免团队成员做重复工作（ps.如果npm库更新失败，可以先去除.npmrc的registry配置再更新）
安装 metro 库

npm install metro --save

本人开始安装的时候失败了

npm ERR! code E404 npm ERR! 404 Not Found: @babel/core@^7.0.0-beta

因为本人在.npmrc做了源配置

registry=your.private.host

去掉后安装成功
如果你用的还是旧版本的navigator，需要安装react-native-deprecated-custom-components，之后请记得在修改相应的import代码

npm install react-native-deprecated-custom-components --save

import 代码

import { Navigator } from 'react-native-deprecated-custom-components';
第三方库的问题

【基于React-Native的项目升级（0.43.3|基于React-Native的项目升级（0.43.3 -> 0.54.0）】一些第三方库长期没有维护的，还是用React.createClass来创建组件，修改为 class YourModule extends Component
如果遇到 Duplicate RCTMethodInfo的报错信息，需要修改头文件的引入方式
#if __has_include("RCTBridgeModule.h") #import "RCTBridgeModule.h" #else #import #endif
修改为
#if __has_include() #import #else #import "RCTBridgeModule.h" #endif
issues链接

第三步本地代码排查修改

先排查自己项目里的js文件是否使用strict模式, 如果是使用 use strict 请务必放在providesModule后面，否则会引起metro打包出错 Unable to resolve module，（ps. facebook将打包模块抽出成了现在的metro）
/** * @providesModule YourModuleName * @flow */ 'use strict';
如果遇到图片找不到的问题，请在插入图片的代码中去除"@2x，@3x"

修改为
排查项目中是否有一个文件同时存在providesModule与相对路径同时存在的方式如：
'use strict'; import { blue } from 'Colors' //这里以providesModule的方式引入 import Colors from './Colors.js' //这里是以相对路径的方式引入，与上面的会冲突，以前的版本不会有问题，貌似是metro的问题

修改成
'use strict'; import Colors, { blue } from 'Colors'