windows部署React-Native的开发环境实践（技术细节）

前情摘要

众所周知，有人说.net能够用Xamrian，呵呵，不习惯收费的好么？搞.Net的人设置一次java的环境变量，可能都以为实在太麻烦了，多是由于这些年微软确实把咱们给带坏了，全部东西一键安装，简单设置，打开项目直接运行就好了，而要想成功部署android开发环境，那可能须要本身填N个坑，最近FB出的React-Native比较火，哥们在不忍转学java的状况下，，虽然java不是anroid，但兄弟我仍是决定用React-Native来实现本身的android梦，因而开始了很多天的填坑运动，固然兄弟们不要像我学习，我是一边工做，一边填坑的，有一下没一下的，可是最后仍是顺利部署上了。

特别鸣谢

首先，我得说，我开始填坑也是站在巨人的肩膀上的，因此如下几位的文档我是通过仔细阅读的，虽然到后来填坑时，不少细节都忘了，可是还得回来再看过啊，你们在看的随笔时，若是发现有的东西只是说了下，那颇有可能他们几位说的已经比较详细了，我固然不表述了。因此结合起来看最好。

http://bbs.react-native.cn/topic/10/%E5%9C%A8windows%E4%B8%8B%E6%90%AD%E5%BB%BAreact-native-android%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83（首选，否则你还能再多填坑）

http://bluereader.org/article/82281734（这篇也不错）

http://my.oschina.net/jackzlz/blog/508210?fromerr=5Hyi3aQ4（有帮助）

还有一个qq群帮助我比较大，其中有高手愿意指点新人，同时有好多新人愿意相互交流，为免你们说我作广告，能够私信索取

正式填坑

你若是看了上边几个连接的文档相信知道了一个基本步骤：

1. 安装JDK

2. 安装Android SDK
3. 安装node.js
4. 安装react-native命令行工具
5. 建立项目
6. 运行packager
7. 运行模拟器
8. 安卓运行

我列的这几个步骤可能与上边参考的几位阿牛的有区别，其实有些环节能够暂时不操做，对于咱们新手来讲，第一眼想看到的不就是程序正常跑起来么。

一、安装JDK

这个你们都知道怎么下载，但也有少数人不知道，我啰嗦下：

下载连接：http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html

有 8u65或8u66，我下的后者，这个我到以为无所谓，本身根据喜爱下吧。下来以后就是安装了，在windows下安装应该没有问题，安装完以后要配置环境变量，这是JDK的第一大特性（我的观点），咋就不能安装时程序设置呢，非得手动配？你看看人家Node，本身安装完也就设好了。

配置JDK

按上图的步骤，此电脑上右击，而后按后边的步骤就能够了，在环境变量中添加JAVA_HOME的变量与值，并将其添加到Path中，我用的是win10，其它windows操做系统相似，mac自行绕开，这个你们若是不清楚细节，直接百度就好了。若是设置成功，你在cmd中输入java，那确定会正确的响应，因此设置完后检查下看这步有没有问题，不然等到了后边以后，你会发现坑根本不知道是在哪挖下的，那你怎么填？

二、安装Android SDK

这个是我遇到比较大的一个坑，主要还由于墙的缘由，很差操做，因此坑也就大点，其实这块的问题，在上面几个大牛的帖子中是说过的，如下复制下来，你们领会下：

能够单独安装Android SDK，也能够经过Eclipse ADT或者Android Studio一并安装。推荐使用Android Studio，如下说明会默认以Android Studio的方式说明。请注意选择x86仍是x64版本。

为了加速下载，推荐从AndroidDevTools下载。

而后进入SDKManager(可经过Android Studio菜单Tools-Android-SDK Manager)，确保如下项目已经安装并更新到最新：

• Tools/Android SDK Tools (24.3.3)

• Tools/Android SDK Platform-tools (22)

• Tools/Android SDK Build-tools (23.0.1)

• Android 6.0 (API 23)/SDK Platform (1)

• Extras/Android Support Library(23.0.1)

推荐使用腾讯Bugly的镜像加速下载。查看说明

推荐将SDK的platform-tools子目录加入系统PATH环境变量。

我总结下个人经验，我是先安装的SDK manager，而后让其安装SDK的，以下图：

而后这货就会常常给你显示个Failed了，或者长时间进度条保持不变，速度很慢，时间很长，我起初就让他本身下去呗，我用的是虚拟机，反正不影响我正常工做，它爱何时下完什么下完，因此常常下班了，它还在下，干脆不关机，你下你的，后来有几个没装上也不在意了，（此处有坑），打开SDK manager后你就会看到哪些装了哪些没装，显示installed的便是装了，哪几个 要装建议参照上边的说明。我用这个装的时候buildtool的23.0.1死活装不上，最后因此老出错，下边有说。

安装完以后，记得配置ANDROID_HOME环境变量，是Android SDK Tools的安装目录，这个你在安装的时候注意看下，而后在path中要添加两条， %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools,

这个建议你们设置，不然后边会出错，我当时是没有设的，由于有一个帖子中说最好设上，也就是能够不设，结果本身给本身挖了个坑。安装完以后若是正常，你在命令行输入android，就能直接打开SDK manager,这也算是验证你的android环境搭建好了没。

三、安装node.js

这个是最没有坑的一个，下载其它东西的时候捎带下载了node.js，而后安装了下，并且这货本身设置环境变量，省去咱们很多事，此处给node点个赞，程序在安装时我记得有选项，选上就能够了，你装完以后，在环境变量中就能看到下面的东西了。

 

四、安装react-native命令行工具

若是前边正常的话，这块应该是比较容易的，照着教程输入下边的命令：

npm install -g react-native-cli

若是你出现上边的效果，说明它在工做，这应该是正常的。至于以上大牛们帖子中说的bug，我是没有遇到的，说明在新版本中已经修复这个问题了。

五、建立项目

输入下边的命令：

react-native init reactNative

这个命令前边两具是命令后边这个reactNative是目录名，你本身命名就行，我一开始觉得必须是这个名字，郁闷了好半天，后来才发现这就是名字。

接下来输入下边的命令：

react-native run-android

我当时是出错了的，以下图：

提示是缺乏Build Tools 23.0.1，这就是前边采用SDK manager时挖下的坑，因此建议你们前边有问题时解决了再日后走，我是如何解决的呢，我火冒三丈的时候，下载了Android Studio，记得大牛们说，推荐下载这个，但是我没有听，用SDK manager在那里狠费劲，最后还得装上。这里须要提醒下各位，下载这个的目的是补全前边缺乏的Build Tools，你们若是也采用了两种方式来安装的话，必定要注意将下载下来的SDK放在同一个目录中，也就是要与环境变量设置中的位置一致，默认的应该是以下图相似的位置，和SDK manager设置的路径不一样，因此若是你采用两种方式补全的话，你就把这个目录下的复制到同一个目录中，我是复制这里到SDK manager的，缘由是我前边都设置了环境变量了啊。

因此若是是第一次安装的兄弟姐妹们，就不要采用SDK manager了，速度比较慢，固然这是我的观点，您仅供参考啊！

上边的问题解决后，就能够运行packager了

六、运行packager

react-native start

上边就是正常运行后的状态，一开始我等着结束呢，后来它就一直保持这个状态，我觉得卡住了，其实它是正在运行，这里吐槽下，你就不能给个正在运行的提示啊，害的我担忧好半天，随后咱们须要安装模拟器或连真机。

说明下，若是用真机，android 5.0如下的话要和电脑网络相通，注意是网络，不是插了USB线就好了，我在此处转过好几圈，最后仍是群里的高手说的，我才明白了。不过我说明下，我是在虚拟机中装的环境，因此用模拟器调试的，不然手机如何与虚拟机网络相通仍是个问题，谁要是解决了告诉我一声，不过不管是模拟器仍是真机，都是要装驱动的，我为了图省事，我直接装了豌豆夹，让这货帮忙装了下驱动，呵呵，此处应该有掌声，大家要是嫌装驱动麻烦，大家也能够这样作。

七、运行模拟器

模拟器你们就下载大牛们推荐的BlueStacks，挺好用的。你链接好虚拟机或者真机也好，在cmd中输入adb devices就能够查看了。若是有东西说明链接正常，没有你就再检查检查看是否是没链接上。

8.安卓运行

设备链接正常以后，就能够运行咱们的程序了，注意不要关掉上边说的packeger窗口，用另外一个CMD运行下边的命令：

react-native run-android

这里原本是咱们最应该激动的时候，可是每每这个时候都是要出错的，个人也不例外，显示了一个红色窗口，以下图：

不要惊慌，没关系张，最起码咱们都看到界面了啊，下面的设置原本是能够参考第一篇老大的文章的，那就是设置IP与端口，只是老大没有贴图，同时也说是局域网地址，我一直觉得是和搭建环境的电脑处于同一个网段就行，实际上是要设置成电脑的IP，并加上端口，以下图，而后肯定再返回就好了，而后再从新rload js就应该正常了。设置的菜单真机点菜单按键便可，模拟器的点下图所示的位置就能出来，而后选那个dev settings.

再而后：选下边的debug server host for device这一项。

而后就是这里了：

设置完以后肯定返回再从新加载，激动人心的时刻才真正到来了：

总结

程序员都有一颗强大的心是有道理的，光这个东西我调试了好几天，都没有战胜我，最后我仍是让它出来了，因此为全部的搞开发的程序员们鼓掌。

固然，因为历时几天，同时内容实在比较多，又得调试bug，还得截图给你们准备写心得，因此有的地方写的很乱，同时也有不全面的地方，你们若是有疑问，留言或qq均可以。我们接着聊。声明一下，截图有的是网上的，有的是群里直接拿过来了，只是为了符合场景，若是你们以为我盗了你的图，提出来，我再想办法截个人图，毕竟有的错误还原一回也不容易了