搭建React Native Android开发环境[Windows]

推荐一个学习React Native的网站 http://reactnative.cn/docs/0.39/getting-started.html#content

系统环境要求

JDK1.8+和Android Studio2.0+开发环境
推荐配置Android SDK的环境变量

[ANDROID_HOME] = D:\AndroidTools\sdk [SDK安装根目录]
[path]后追加 ;%ANDROID_HOME%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools; 

安装Node.js开发环境【自带npm】

推荐一位网友的安装流程：http://blog.csdn.net/itpinpai/article/details/48103845

【npm】 Node包管理器(npm)是一个由Node.js官方提供的第三方包管理工具。

注意：安装完成后建议设置npm镜像，否则创建react-native项目时会特别慢或者不成功，下面是网上查到的一些方法。我用的是第一个，在cmd窗口执行即可。
1.通过config命令

npm config set registry https://registry.npm.taobao.org （配置正确会输出响应信息）
npm info underscore 

2.命令行指定

npm --registry https://registry.npm.taobao.org info underscore 

3.编辑 ~/.npmrc 加入下面内容

registry = https://registry.npm.taobao.org

安装react-native命令行工具

注意：如下命令都是在cmd窗口执行。

npm install -g react-native-cli

创建react-native项目
默认会生成在C盘用户文件夹下

react-native init ReactNativeDemo

启动项目【服务端】
进入新建项目的根目录执行

react-native start

依次执行完上面的命令后，在浏览器打开这个链接http://localhost:8081/index.android.bundle?platform=android，页面中输出下面的信息，就说明编译成功了。

(function(global) {
global.__DEV__=true;
global.__BUNDLE_START_TIME__=Date.now();
})(typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : this);
……
……

Android运行

保持服务端开启，另外打开一个cmd窗口，切记要以管理员身份运行，进入项目根目录下运行如下命令

react-native run-android

首次运行特别慢，需要联网下载gradle依赖，请耐心等待。
我用的是真机测试，在运行当前命令之前可以通过【adb devices】查看连接的android终端。

现在我们已经可以看到APP运行，并报错Unable to download JS bundle
解决方法：摇晃手机会出现弹窗，点击【Dev Settings】，选择【Debug server host for device】，输入你正在运行服务端的那台电脑的局域网IP加：8081（注意 要保证手机和电脑在同一个网段，否则会报错Could not connect to development server）,配置成功后返回，再次摇晃手机，点击【Reload】，就可以看到输出结果了。
如果手机没有弹出报错提示，可以到权限里查看悬浮窗权限是否被禁止了。

完整开发环境配置

我们日常开发推荐使用WebStorm（服务端）+Android Studio（客户端）
通过WebStorm导入我们创建的工程ReactNativeDemo，使用Studio导入工程里的android项目即可。

安装WebStorm后，需要简单配置 点击菜单【Run】，选择【Edit Configurations】会弹出一个配置面板，点击左上角【+】选择【npm】，如图就是配置后的界面。