管理RN版本库

4.管理RN版本库
   在开发中，会经常的去控制React Native的版本库，得以适配各种条件下的开发，那该如何查看、控制ReactNative的版本呢？
**1 查看本地的React Native的版本**
  命令行输入
 react-native --version
  命令行效果
5000){failImgCache.clear();}failImgCache.push(this.getAttribute('src'));this.src='style/imgErr.gif';$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded');this.onload=''" onload="loadedImgCache.push(this.getAttribute('src'));$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-right-style: solid; border-left-style: solid; border-right-color: transparent; border-left-color: transparent; vertical-align: middle; max-width: 100%; cursor: default;">
项目中查看react-native版本
5000){failImgCache.clear();}failImgCache.push(this.getAttribute('src'));this.src='style/imgErr.gif';$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded');this.onload=''" onload="loadedImgCache.push(this.getAttribute('src'));$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-right-style: solid; border-left-style: solid; border-right-color: transparent; border-left-color: transparent; vertical-align: middle; max-width: 100%; cursor: default;">

**2 更新本地的react-native-cli的版本**
    命令行输入
npm update -g react-native-cli
5000){failImgCache.clear();}failImgCache.push(this.getAttribute('src'));this.src='style/imgErr.gif';$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded');this.onload=''" onload="loadedImgCache.push(this.getAttribute('src'));$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-right-style: solid; border-left-style: solid; border-right-color: transparent; border-left-color: transparent; vertical-align: middle; max-width: 100%; cursor: default;">
**3 查询react-native的npm包最新版本**
NPM的全称是Node Package Manager ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
    命令行查询npm包最新版本
npm info react-native
   执行命令
    5000){failImgCache.clear();}failImgCache.push(this.getAttribute('src'));this.src='style/imgErr.gif';$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded');this.onload=''" onload="loadedImgCache.push(this.getAttribute('src'));$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-right-style: solid; border-left-style: solid; border-right-color: transparent; border-left-color: transparent; vertical-align: middle; max-width: 100%; cursor: default;">
   查看效果
npm info react-native >> D:\logcat.txt
5000){failImgCache.clear();}failImgCache.push(this.getAttribute('src'));this.src='style/imgErr.gif';$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded');this.onload=''" onload="loadedImgCache.push(this.getAttribute('src'));$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-right-style: solid; border-left-style: solid; border-right-color: transparent; border-left-color: transparent; vertical-align: middle; max-width: 100%; cursor: default;">
查看当前最新版本
5000){failImgCache.clear();}failImgCache.push(this.getAttribute('src'));this.src='style/imgErr.gif';$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded');this.onload=''" onload="loadedImgCache.push(this.getAttribute('src'));$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-right-style: solid; border-left-style: solid; border-right-color: transparent; border-left-color: transparent; vertical-align: middle; max-width: 100%; cursor: default;">

**4 升级或者降级npm包的版本**
npm install --save react-native@0.41.1 (版本号)
译注：从0.24版本开始，react-native还需要额外安装react模块，且对react的版本有严格要求，高于或低于某个范围都不可以。本文无法在这里列出所有react native和对应的react模块版本要求，只能提醒读者先尝试执行npm install，然后注意观察安装过程中的报错信息，例如require react@某.某.某版本, but none was installed
，然后根据这样的提示，执行npm install react@^15.4.2 --save
。
5000){failImgCache.clear();}failImgCache.push(this.getAttribute('src'));this.src='style/imgErr.gif';$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded');this.onload=''" onload="loadedImgCache.push(this.getAttribute('src'));$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-right-style: solid; border-left-style: solid; border-right-color: transparent; border-left-color: transparent; vertical-align: middle; max-width: 100%; cursor: default;">
升级react-native的npm版本后，打开该项目中的package.json文件，找到dependencies标签里边我们把react-native的版本修改成最新版本
5000){failImgCache.clear();}failImgCache.push(this.getAttribute('src'));this.src='style/imgErr.gif';$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded');this.onload=''" onload="loadedImgCache.push(this.getAttribute('src'));$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-right-style: solid; border-left-style: solid; border-right-color: transparent; border-left-color: transparent; vertical-align: middle; max-width: 100%; cursor: default;">
接下来就是执行如下代码进行安装(注意请命令行切换到项目主文件夹):-这个安装过程还是需要花点时间的
npm install
5000){failImgCache.clear();}failImgCache.push(this.getAttribute('src'));this.src='style/imgErr.gif';$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded');this.onload=''" onload="loadedImgCache.push(this.getAttribute('src'));$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-right-style: solid; border-left-style: solid; border-right-color: transparent; border-left-color: transparent; vertical-align: middle; max-width: 100%; cursor: default;">

**5 更新项目templates文件（可选）**
       新的npm包会包含更新在运行react-native init命令生成的一些动态文件，例如init创建项目的时候会生成iOS和Android的子项目，我们可以通过以下的命令进行获取最新的代码
     命令行执行，如果有提示按yes
react-native upgrade
5000){failImgCache.clear();}failImgCache.push(this.getAttribute('src'));this.src='style/imgErr.gif';$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded');this.onload=''" onload="loadedImgCache.push(this.getAttribute('src'));$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-right-style: solid; border-left-style: solid; border-right-color: transparent; border-left-color: transparent; vertical-align: middle; max-width: 100%; cursor: default;">
5.WebStom设置RN代码提示
安装[ReactNative-LiveTemplate-master](https://github.com/virtoolswebplayer/ReactNative-LiveTemplate)插件,window的用户建议使用第一种方式安装
5000){failImgCache.clear();}failImgCache.push(this.getAttribute('src'));this.src='style/imgErr.gif';$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded');this.onload=''" onload="loadedImgCache.push(this.getAttribute('src'));$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-right-style: solid; border-left-style: solid; border-right-color: transparent; border-left-color: transparent; vertical-align: middle; max-width: 100%; cursor: default;">