React Native在Windows下的安装及环境配置（Android）

接下来给大家讲一下在Windows环境下安装React Native的环境，React Native是Facebook推出的开源项目框架，类似原生的APP的运行和响应速度，JS和HTML的混合，性能还算不错。详细的大家就百度或谷歌查一下吧。很像JAVA和HTML的混合语法。本文主要针对Android。网上很多教程是旧的，本教程应该算是最新的了。

官方地址：https://facebook.github.io/react-native/

官方Github地址：https://github.com/facebook/react-native/

1、首先你电脑已经安装了Android Studio，JDK。这就不用说了，会Android的电脑都会有这些。

2、下载安装Nodejs。去官网下载：https://nodejs.org/en/  ，推荐最好下LTS版本，12M左右。

正常安装即可。

3、安装完Nodejs后，运行cmd打开命令窗口，输入:node -v，如果正确获取到Nodejs版本号，那就说明安装正确。也可以输入npm，看输出有无错误。

4、安装React Native命令行工具react-native-cli

注：如果你的电脑访问国外的网络很慢，又不能翻墙，那就使用国内镜像吧，这里以淘宝镜像为例，输入如下命令：

npm config set registry https://registry.npm.taobao.org

后续的一些下载都是国内淘宝镜像地址下载了，速度快些。如果上面配置正确的话，输入命令：

npm info underscore

会返回淘宝镜像返回过来的一系列信息字符。

输入命令：

npm install -g react-native-cli

5、创建一个新项目，名字可以按照你的需要命名。

react-native init AwesomeProject

这里按照官方写的，叫：AwesomeProject。

如果你电脑没安装yarn，会自动先安装yarn。

Yarn是什么？百度或谷歌下。当然，yarn不翻墙的话下载很慢，所以推荐大家去官网下载直接安装即可。https://yarnpkg.com/zh-Hans/

下图是命令安装成功后的界面：

6、目录结构看下：

7、运行我们的React Native服务器端：输入命令行前，当前所在路径要是项目的根目录。

react-native start

8、浏览器就可以运行访问编译了。

用浏览器访问http://localhost:8081/index.android.bundle?platform=android，如果可以访问表示服务器端已经可以了。

9、运行编译项目：

刚才运行服务器的命令窗口不要关闭，另外打开一个命令窗口，输入：

react-native run-android

IOS的话，输入：

react-native run-ios

前提是 已经运行启动了模拟器，或者连接了真机才可以这样输入命令。

第一次运行，如果你没有安装gradle-2.14-all的话，会进行下载。

还有一种方式编译运行，就是用Android Studio直接打开android工程文件，运行编译到手机或者模拟器即可，支持Genymotion。如果想手机的React-Native APP可以访问我们的刚才电脑上运行的服务器，那么一定要在同一个wifi下。

运行正常的话，会出现下图界面。

如果出现红色的错误，可以点击菜单键或者长按菜单键，重载或者设置服务器IP地址和端口号。

如果出现下图错误的话，进入项目根目录输入如下命令：

React-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

输入如上命令就直接把JS编译打包进APP里了。

现在就可以编辑项目根目录的index.android.js文件了。然后重新启动APP就可以看到修改后的效果了。

注：其实一些命令也可以在Android Studio的Terminal命令窗口输入，和在cmd命令窗口输入一样，很方便。

参考文献：

https://facebook.github.io/react-native/docs/getting-started.html