基于React-Native的项目升级（0.43.3 ->

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

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

第一步 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.createClass来创建组件，修改为 class YourModule extends Component
  如果遇到 Duplicate RCTMethodInfo的报错信息，需要修改头文件的引入方式
  #if __has_include("RCTBridgeModule.h") #import "RCTBridgeModule.h" #else #import <React/RCTBridgeModule.h> #endif
  修改为
  #if __has_include(<React/RCTBridgeModule.h>) #import <React/RCTBridgeModule.h> #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"

      <Image source={require('test@2x.png')} />
  

  修改为

      <Image source={require('test.png')} />
  

• 排查项目中是否有一个文件同时存在providesModule与相对路径同时存在的方式 如：

      'use strict';
      import { blue } from 'Colors' //这里以providesModule的方式引入
      import Colors from './Colors.js' //这里是以相对路径的方式引入，与上面的会冲突，以前的版本不会有问题，貌似是metro的问题
  

  修改成

      'use strict';
      import Colors, { blue } from 'Colors'
  

至此，就完成所有工作！最后祝愿大家都能升级成功！