[React Native Android安利系列]搭建React Native Android环境

欢迎你们收看react-native-android系列教程，跟着本系列教程学习，能够熟练掌握react-native-android的开发，你值得拥有
https://segmentfault.com/blog...

(PS，和聊一聊系列写在一块儿也实在是没辙， 谁知道如何新建专栏，给我留个言.....)

React-Native的横空出世，知足了前端工程师们的愿景，摆脱了浏览器，前端开发者们又有了一个方向。可是本人认为，ReactNative更像是套了一层前端壳子的原生开发，要想了解RN仍是须要多多理解原生开发的。废话很少说，想了解更多的RN心灵鸡汤，本身去百度就行了。

搭建react-native的文章虽然不少，但大多数都是搭建js层面的，没有结合原生android和android开发去讲。这一套教程，将会更多的结合原生的安卓去讲react-native。

1. 环境

首先，咱们须要搭建一个开发环境。不管是window/mac/linux中的哪个，必需要具有的条件有如下几点

1.1 安装jdk

windows的话，在cmd中执行java -version看就行，mac/linux的话。在终端下，直接执行java -version命令进行查看，若是没有，请百度"jdk安装与环境变量配置"。直到使用java -version的时候，出现了以下图所示的信息，则证实你安装成功了(如图1.1.1)。

图1.1.1

1.2 安装nodejs

nodejs的官网上有各个系统的下载包，window下能够直接下载exe可执行的node，而后把node.exe所在的路径，添加到环境变量中便可，这样安装更加干净。直到，在windows下的CMD，或者mac下的终端任意目录下，输入node，能够出现如图2.3.1所示便可。

图2.3.1

1.3 安装NPM

通常来说，安装了nodejs，也会顺带着安装上npm，不过有的时候，咱们须要单独安装，windows下，若是使用了node.exe的话，能够自行百度一下 "windows安装npm" 按照说明安装npm，而且把npm添加到环境变量中去。直到在终端或者CMD任意目录下，执行npm出现如图1.3.1所示信息，则意味着，你安装成功了。

图1.3.1

1.4 安装react-native-cli

这个工具是react-native的命令行工具，是咱们接下来运行工程的基础。安装的话，直接使用。

npm install -g react-native-cli

命令进行安装便可，mac/linux下的话，可能会报错：
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/react-native-cli'
这个时候，证实你的权限不够，能够在命令前面加上sudo：

sudo npm install -g react-native-cli

1.5 安装android sdk

这里建议把android studio与android sdk一块儿安装，android的官网上便可下载与安装，有bundle版的话，更加的省事。

1.6 安装安卓模拟器

若是有安卓手机的话，更推荐使用安卓手机进行真机调试，若是没有的话，咱们也能够经过安卓模拟器进行调试，windows的话，建议下载blue stack(下载安装便可)，mac/linux的话，可使用android sdk里面自带的avd，建立新的设备进行调试。

2. react-native的helloworld

接下来，咱们从一个使用了android studio与react-native的hello world入手。开启咱们的react-native-android之旅。

2.1 建立工程

咱们挑一个干净的文件夹来初始化咱们的工程。windows的话，经过dos命令行(程序中查找cmd进入)。linux/mac的话，经过bash进入到文件夹下，执行如下命令建立工程，如图2.1.1

react-native init hellowReact

图2.1.1
等待片刻，咱们会看到生成了一个新的项目(helloReact)，生成的项目里面包含了IOS版本与Android版本的默认项目。

2.2 用android studio打开

此时咱们可使用android studio打开，新建项目下的android文件夹，如图2.2.1所示。

图2.2.1
打开工程后，咱们能够看到下方开始编译bundle，如图2.2.2。

图2.2.2
等待build gradle的过程比较漫长，须要耐心等待一下。build好以后，咱们就能看到在咱们的andriod studio中出现了新建的工程。
若是发现没有build，那么请看看控制台，是否提示没有安装什么gradle，若是是的话，点击进行安装便可，如图2.2.3。

图2.2.3

2.3 将安卓工程编译并安装到机器上

在准备就绪后，工程上方的工具栏，会出现能够编译的按钮(如图2.3.1所示)咱们点击绿色的运行按钮

图2.3.1
若是使用了bluestack的话，请把bluestack打开，若是使用手机调试的话，请把手机的开发人员选项打开，而且把USB调试选项打开。咱们这里直接使用了手机调试(如图2.3.2的调试列表中出现了咱们链接的手机)。

图2.3.2
不管你用哪一种方式，在点击完绿色的运行按钮以后，都会看到选择设备的列表。选择本身的设备，而后点击OK。开始编译(如图2.3.3)。

运行完成以后，咱们果真看到了。。。。。。。BUG(如图2.3.4)

图2.3.4
不过，若是你运行到了这一步，恭喜你，你已经将react的安卓项目成功的编译并安装到手机上了。
出现这个BUG的缘由主要是因为咱们的app调试阶段回去远程寻找咱们的js，而默认，它回去本地寻找，因此咱们接下来要干两件事情，1. 搭建能够访问js的服务。 2.让手机上的react应用去按照这个服务寻找JS

2.4 搭建服务

用windows的CMD或者MAC/linux的终端，进入到hellowReact目录下(咱们用react-native init建立的工程)，而后执行，结果如图2.4.1：

react-native start

图2.4.1

运行成功后，咱们看到react-native利用了本机的8081端口，开启了一个js的服务，咱们访问一下(结果如图2.4.2所示)。
http://localhost:8081/index.a...
(PS:第一次访问编译会有点慢)

图2.4.2

2.5 设置app寻找js的地址

接着，咱们要进行第二步---让手机上的react应用去按照这个服务寻找JS
咱们打开手机上那个报错的APP（hellowReact）,而后摇一摇。（是的，摇一摇，不过不是微信）此时会出现开发者工具，如图2.5.1所示

图2.5.1
固然，你要是使用bluestack的话，也行，左侧工具栏里面有摇一摇。
如图2.5.2，点击Dev Settings，点击最下方的Debug server host & port for device，

图2.5.2
会弹出配置项，这个配置项就是寻找js的地址啦：

那么地址如何填呢？
若是是真机调试的话，手机最好和本身的电脑在一个局域网下（使用了同一个wifi也能够），若是是bluestack的话，则不用管这个了。
windows电脑，请在CMD命令下，输入ipconfig查看本身的ipv4地址。或者用电脑右下角的查看网络链接，来查看本身的ipv4地址。若是是mac/linux的话，查看一下网络设置，上面会有写。本身的ip地址。
在配置项里面填写本身的ip地址:8081，如图2.5.3

图2.5.3

2.6 从新加载js，并运行成功

点击肯定，返回主界面。再摇一摇手机，而后点击reload js。运行结果如图2.6.1

图2.6.1
因而，咱们的hello world就大功告成啦，至此，咱们的React-Native-Android环境也算大功告成了。

上述讲解，能够在这里找到代码例子：

https://github.com/houyu01/re...不要走开，立刻回来，下一篇，咱们会介绍，如何在ReactNative中利用js编写咱们想要的界面