前言

　　React Native由Facebook公司于2015年F8大会上开源，其主张“Learn once, write everywhere”。React Native的核心设计理念是：既拥有Native（原生）的用户体验，又拥有React的开发效率。

　　目前，React Native已经基本上完成了对多端的支持，实现了真正意义上的面向配置的开发。开发者可以灵活的使用HTML和CSS进行布局，使用React语法构建组件，实现H5、Android、iOS等多端的代码复用。

　　就目前来看，React Native的优势有三点：跨平台、追求极致的用户体验、Learn once, write everywhere。

　　以上是对React Native的简单介绍，接下来言归正传，介绍Windows下React Native的开发环境的搭建。

准备工作

　　在配置React Native的开发环境之前，我们首先需要具有这些环境：

　　JDK

　　去Oracle的官网上下载。别忘了配置环境变量。

　　SDK

　　SDK可以通过下载并安装Android Studio来获取，反正以后是以RN和原生代码结合开发的，因此下载AS是必须的。安装之后别忘了配置SDK的环境变量。

　　安装好SDK之后，打开SDK Manager，下载一些组件，需要确保以下几点：

• 　　Extras文件夹中的组件全部下载；
• 　　下载API 23或23以下的版本的Platform以及Image，并在Tools中下载这个API版本的最低版Build-tools。

　　下载完成之后，可以先创建一个Andorid模拟器，留待后用。

　　Git

　　下载并安装Git，配置SSH KEY、用户名和邮箱等。

　　Node

　　1、在GitHub上下载NVM的安装包（地址： https://github.com/coreybutler/nvm-windows/releases ），选择nvm-noinstall.zip下载到本地，并解压到任意文件夹中（这里我解压到D:\CodingTools\NVM目录中）；

　　2、使用管理员权限运行install.cmd文件，在弹出的框中按回车忽略提示，然后会打开一个settings.txt文件，我们需要把这个文件修改成如下这样：

root: D:\CodingTools\NVM
path: D:\CodingTools\NVM\Nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

　　需要说明的是，root和path都是自定义的路径。

　　3、配置环境变量，这里都是按照我的目录来配置的，具体如下：

　　　　NVM_HOME：NVM的解压目录，例如本笔记中是 D:\CodingTools\NVM

　　　　NVM_SYMLINK：随意，本笔记中是 D:\CodingTools\NVM\Nodejs

　　　　PATH：添加“;%NVM_HOME%;%NVM_SYMLINK%;”

　　4、安装Node：打开命令行工具，进到上面settings.txt文件设置的root目录，输入 nvm install latest ，下载完成后通过 nvm list 命令查看下载的版本；

　　5、使用Node：在上面的同一个命令行工具中输入使用 nvm use XX 最新版本，XX表示刚刚 list 出来的版本号；

　　6、为检查Node是否安装成功，我们可以通过 node -v 、 npm -v 、 nvm v 三个命令来查看Node环境的版本。

配置React Native

　　在GitHub中搜索 react-native ，找到Facebook的项目react-native，打开Git Bash使用git clone命令将其克隆到本地，如： git clone https://github.com/facebook/react-native.git 。

　　克隆成功后，打开命令行工具，进入刚刚克隆的项目中的 react-native-cli 目录中，输入 npm install -g 命令，等待安装完成，就可以在命令行中使用react-native命令了。

　　为了验证React Native是否安装成功，我们可以通过 react-native -v 命令来查看RN的版本。

React Native版本控制

　　我们可以通过一下几条命令来对React Native进行版本控制。由于React Native现在还处于高速发展的阶段，因此GitHub上的仓库更新会很频繁，因此我们需要与时俱进，及时下载体验最新的React Native组件。

　　查看React Native的当前版本： react-native --version 

　　查看React Native在npm包中的最新版本： npm info react-native 

　　更新本地React Native的版本（更新到最近最稳定的版本）： npm update –g react-native-cli 

　　将React Native升级或降级到某个指定版本： npm install –-save react-native@版本号 

下载并运行默认项目

　　React Native为我们提供了一个默认的入门项目AwesomeProject，我们可以通过这个项目来入门React Native，同时进一步验证React Native是否真正的安装成功了。

　　1、创建一个目录用来盛放AwesomeProject，然后打开cmd，进入这个目录中，输入 react-native init AwesomeProject 命令，等待一段时间，直到出现“To run your app on Android ......”，表示初始化AwesomeProject完成。

　　2、在cmd中进入AwesomeProject中，输入 react-native start 命令，开启React Native的服务器。

　　3、打开一个Andorid模拟器。

　　3、不要关闭开启服务器的cmd，重新打开一个cmd，进入AwesomeProject下，输入 react-native run-android 命令，将项目运行到Andorid模拟器上。

　　注意：

　　第一次运行的时候会下载gradle包，可能会比较慢，需要耐心等待。

　　如果运行时报错，可以查看cmd中的错误信息，主要查看“What went wrong”标题下的错误信息，一般都是SDK Manager中下载的组件不合格导致的。

　　如果出现“Starting intent: ......”字样，则表示运行成功，跳转到模拟器中，就可以看到项目的Welcome界面了。

　　如果模拟器上爆红，大家可以根据错误信息，百度或Google解决。

开发工具推荐

　　Web Storm

　　Web Storm是JetBrains下的一款产品，可以开发很多由JavaScript衍生的框架代码。

　　Web Storm的优点是，它与Android Studio很相似，因此使用过AS的人会很容易上手。

　　Web Storm的缺点是，它对React Native的支持还不够完善，比如，代码提示不完善等。而且，Web Storm还需要破解。

　　VS Code

　　VS Code，全称Visual Studio Code，一看就是MS的产品，但它摒弃了VS臃肿的特点，VS Code特别轻量，几乎就是一个文本编辑器，但它的功能还是很齐全的。

　　VS Code的优点是，轻量，开源，对React Native支持较好。

　　VS Code的缺点是，设置比较繁琐，快捷键什么的用起来不顺手。

　　针对上面两种开发工具，我认为在开发React Native来说，VS Code是比较好用的。

【RN - 基础】之Windows下搭建React Native开发环境

原文：http://www.cnblogs.com/itgungnir/p/6440995.html