React Native系列(一)React Native 环境搭建

        最近一直忙着找工作，由于本人不是计算机科班出身，加上个人能力不是很突出，找工作并不是很顺利，而且还很艰辛，现在只有一个中小型互联网公司的offer。从8月开始，大大小小的笔试参加了几十场，包括线上和线下，面试参加了也有十余场，终于到了国庆，手里总算有一个不大不小的offer，心里很感恩了，面试过程，也是一个学习的过程，感觉自己还是与其他人有差距的，还是要加强自身学习的，趁着国庆假期，赶紧学习一下新知识，了解一下最新最火的技术-----------React Native。

对于React Native的介绍这里就不多说什么了，不了解的同学可以百度一下，这方面资料也比较多。下面直接开始React Native的学习（我主要是在React Native中文网上学习的，博客里主要讲一些他们操作过程中没有讲到的一些坑，大家可以去React Native中文网上看一看，能学到很多东西）：

首先就是React Native的搭建了，这个网上也有一些介绍的内容，这里我主要讲一些需要注意的地方：

1. 首先就是安装一套能够开发Android环境（包括JDK，SDK，不要用很老的，最好下载官方最新的），最好用Android Studio，Eclipse没有实验过

2. 安装一套C++环境，编译node.js的C++模块时需要用到

C++的编译环境，能有其中某一个年份的就行，我这个安装过好多，所以都重复了，05年08年10年12年13年15年的我都有

3. 点击打开链接 这个地址下载 git 我下载的是windows版本，用Mac与Linux的可以自行尝试一下 ，下载完之后，安装

4. 点击打开链接 这个链接下载node.js，如果打不开，去百度搜下载离线版本的，同样是windows版本，下载完之后，安装

5. github上下载facebook的react-native，解压得到文件夹react-native-master

6.  打开git的安装目录，打开git的命令行工具：

执行命令：

D:\Program Files\Git>npm config set registry https://registry.npm.taobao.org


D:\Program Files\Git>npm config set disturl https://npm.taobao.org/dist

6.进入第5步得到的react-native-master目录

执行命令：

npm install -g react-native-cli

此时，React Native环境大概已经搞好了，如果有问题，看报啥错，无非就是缺少东西，

下面来进行新建一个RN项目，这一部分是比较容易出问题的：

7. 新建一个项目文件夹，比如 MyAppProjects，然后进入该文件夹：

执行命令：（这大概要等个几分钟的时间）

react-native init XXXX

（XXXX为你自己起的工程名称）

8. 下一步，进入到 XXXX目录，执行

react-native start

 把RN的服务打开，这个也要等几分钟，有时可能会更慢，这个要注意有耐心

有反应后，打开电脑上的浏览器，输入：

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

这个要等大概10分钟，比较慢，

如果显示下图的内容，恭喜你，已经成功了一半。

 

9. 最后一步，进入到XXXX目录，执行

react-native run-android

这是要保证你的手机连接电脑，最好用真机测试，模拟器不太靠谱，本来问题就多

此时，大部分同学会走到这一步

下载gradle-2.4-all.zip下载不下来，原因你懂得，这时候可以下载离线版本（百度一下，很多）

注意注意 zip包下载下来后，放到下面的文件夹中：

接下来，有的同学会遇到这种情况：

提示SDK Location 的问题，图片已经找不到了，这里不得不吐槽一下优快云做的编辑器，图片直接粘贴过来竟然还没法保存，没法保存也不提示一下，完全忽视用户的体验。。。。。。。。。

这是环境变量没有设置好。

首先设置ANDROID_HOME

然后，Path路径：

再接下来，有可能 会遇到这个问题：

提示缺少 23.0.1的build tools~~~再吐槽一下，为什么我的图片全没了，我辛苦截了一下午的图。。。。。。。。

意思很明显了，就是缺少版本号为23.0.1的Android的build tools

打开SDK Manager，搞个镜像下载即可，

接下来，还有可能遇到的错误：

设备没有连接好，重新插一下，或者用第三方的手机助手连一下，(注意有时候不行的话可以随时关闭命令行窗口，然后再重新打开命令行窗口)

然后：

可以看到 BUILD SUCCESSFUL

编译成功了

但是出现 error: unknown host service

解决错误方法网上有很多教程：

简单来讲就是看看是谁占用

打开命令行，输入命令：netstat -ano |findstr "5037"

看看是谁占用了结果我的吓了一跳：

是360安全卫士占用了。

360安全卫士模块真是怎么关也关不掉，太恶心了。。。。有哪位同学有方法能关掉它，可以在评论里回复我呀~

关不掉360安全卫士模块，那怎么办呢，我的方法是尝试用第三方手机助手连接一下，这里用的腾讯应用宝：

然后继续运行，结果还是有问题：

图片又丢了，优快云的技术真是呵呵了~~~~

最后，我实在没办法，用Android Studio 打开我的项目，然后运行，成功，

按手机下面最左边的键

设置服务地址与端口：

结果如下：

最后，对不起一些同学了，本来搞的一下午，各种截图都有，结果下午一看，我截的图我放在优快云的编辑环境中是有的，但是发布出去后，全没了，希望优快云改进一下，谢谢~有问题请留言~~~~~