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安装，注意要配置环境变量，这里就不细说了。

注意一下，Git是必须安装的。由于后面须要经过Git来执行一些命令。好比：windows下dev server目前是不会自动运行的，须要执行react-native start启动，

Windows上安装Git for Windows。在安装过程当中，请务必记得勾选Run Git from Windows Command Prompt，

这样会把Git的可执行程序加入到PATH环境变量中，这样其余程序才能在命令行中正确调用Git。

个人Git是之前安装的，没有配置环境变量，好比：

D:\Program Files\Git\bin;D:\Program Files\Git\libexec\git-core;

把这两个路径加入到环境变量Path里就能够正确调用Git

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

Git的安装不说了。

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

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

npm install -g nrm

nrm能够很方便切换源

nrm安装好后，可使用命令

nrm ls

查看源列表

像这样使用命令

nrm use taobao

就能够切换到淘宝的源。

而后执行

npm install -g react-native-cli

安装react-native-cli，就可使用react-native命令。

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

建立react-native项目

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

react-native init RNApp

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

运行react-native项目

而后我就把安卓的程序导入android studio(不导入也能够运行，先说说个人过程)，由于以前我本地没有安卓sdk 23版本，因此编译运行直接提示错误,找不到sdk 23，

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

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

这里没有以前的结构图，下面是我如今的结构图

我手动在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里运行也同样）

这个是因为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服务

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

若是链接不到dev server的话

Android

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

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

启动到上图红线部分的位置dev server就是启动成功了，红线下面的是模拟器或者真机加载成功出现的。

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

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

输入你开发机的局域网IP+8081端口，再按back键返回，再按Menu键，在调试菜单中选择Reload JS，就应该能够看到运行的结果了。

选择Debug JS，在安装了React Developer Tools的状况下，就能够在Chrome下调试应用，可是看不到界面。

参考资料：

http://react-native.cn/docs/getting-started.html

http://www.cnblogs.com/meteoric_cry/p/4874517.html

https://github.com/yipengmu/react-native-android-lession

 

本文地址：http://www.cnblogs.com/ydh2014/p/5075604.html

欢迎加群：182659848 一块儿讨论