转载

react-native for android windows开发环境搭建详细记录

先说说整个环境搭建的过程。上周开始要在windows上搭建react-native for android环境，当时按照找的教程，从git上clone master分支的代码，然后下载了node，安装react-native框架还是很顺利的。

导入到android studio上就无法构建，找找了找原因没有解决，折腾了1天没解决，在这之后也遇到很多问题，搭建过程还是比较曲折的，折腾了好几天才弄好。下面是我的详细安装过程。

搭建环境前的准备
开始安装react-native
创建react-native项目
运行react-native项目

搭建环境前的准备

JDK1.7+
Android SDK
Git(可选)
Nodejs4.0+

开始安装react-native

JDK安装，注意要配置环境变量，这里就不细说了。

Android SDK的安装需要最新的安卓6.0的SDK。下载被墙，可以使用腾讯Bugly的镜像来加速下载。

react-native for android windows开发环境搭建详细记录

Git的安装不说了。

Nodejs的官方源下载有些慢，可以使用淘宝的源。

打开windows的命令行界面使用命令

npm install -g nrm

nrm可以很方便切换源

nrm安装好后，可以使用命令

nrm ls

查看源列表

react-native for android windows开发环境搭建详细记录

像这样使用命令

nrm use taobao

就可以切换到淘宝的源。

然后使用git clone下来react-native源码，或者下载最新发布版本

在命令行界面进入react-native源码目录

然后执行

npm install -g react-native-cli

安装react-native环境

我是使用的最新发布版本0.17rc版，安装会下载一些文件，没有出现什么问题

创建react-native项目

进入你要放置项目的目录然后执行命令

react-native init RNApp

这样就会创建一个RNApp的react-native的项目，创建的过程有些慢，回去下载Gradle依赖，创建完目录会出现如下目录结构

react-native for android windows开发环境搭建详细记录

运行react-native项目

然后我就把安卓的程序导入android studio(不导入也可以运行，先说说我的过程)，因为之前我本地没有安卓sdk 23版本，所以编译运行直接提示错误,找不到sdk 23，

然后我就手动的去修改sdk版本为已有的sdk 18版本（不符合react-native运行要求肯定出错，需要sdk 23版本，也就是安卓6.0 sdk），出现以下错误

react-native for android windows开发环境搭建详细记录

这个提示的是build.gradle里错误，build.gradle在项目中有两个，一个是App根目录下的，另外一个是App下Gradle文件夹下的。好像是android studio自动改变了结构，

这里没有之前的结构图，下面是我现在的结构图

react-native for android windows开发环境搭建详细记录

我手动在android studio设置sdk，IDE自动在build.gradle(Project:RNApp)文件里加入了安卓版本等配置，结果就导致错误，提示的build.gradle(Project:RNApp)里的。

后面我把sdk 23安装好了，还是一样提示错误，后来在 stackoverflow 上找到原因了，

In your top level build.gradle you seem to have the code

android

{

compileSdkVersion 19

buildToolsVersion "19.1"

}

You can't have this code at the top level build.gradle because the android build plugin isn't loaded just yet.

You can define the compile version and build tools version in the app level build.gradle

就是说在build.gradle(Project:RNApp)里规定sdk版本也不会起作用，需要删除这里的sdk版本配置，build.gradle(Module:App)里面本来就有sdk配置

删除后程序终于可以编译了。

现在说说不用android studio直接用命令运行react-native程序，在工程目录下运行命令

react-native run-android

至此，应该能看到APP运行，并报错 Unable to download JS bundle（android studio里运行也一样）

react-native for android windows开发环境搭建详细记录

这个是由于windows上的工程不会自动启动dev server

这里引用翻译的 React-Native中文文档的内容

在Windows平台上，在你运行 react-native run-android 之后，packager不会自动启动。你需要这样自行启动它：

#对于React Native版本 < 0.14的 cd MyAwesomeApp node node_modules/react-native/packager/packager.js   #对于React Native版本 >= 0.14的 (这个版本移除了packager.js) cd MyAwesomeApp react-native start

如果你碰到了 ERROR Watcher took too long to load 的报错，请尝试将这个文件中的timeout值改得更大一些 (文件的具体路径是node_modules/react-native/packager/react-packager/src/FileWatcher/index.js)。

运行这个会启动一个本地8081端口的web服务，可以使用

http://localhost:8081/index.android.bundle?platform=android

在网页中看到开发的界面

我在启动这服务的时候就遇到了ERROR Watcher took long to load，不用去安装watchman，按照上面的把超时时间改长就正常了。

如果连接不到dev server的话

Android

对于Android 5.0以上设备，你可以运行 adb reverse tcp:8081 tcp:8081 来使得你的设备可以访问到你的电脑。

如果运行了还是不行，你只有把启动dev server服务再尝试下，找找问题了，比如8081端口被占用等。

启动了这服务可能还是那个红色界面的提示，因为必须要保证开发PC和模拟器或真机里的安卓系统在同一个局域网才能访问正常

出现那红色界面，摇晃设备或按Menu键，可以打开调试菜单，点击Dev Settings，选Debug server host for device，

react-native for android windows开发环境搭建详细记录