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

   <p>React-Native的横空出世，满足了前端工程师们的愿景，摆脱了浏览器，前端开发者们又有了一个方向。但是本人认为，ReactNative更像是套了一层前端壳子的原生开发，要想了解RN还是需要多多理解原生开发的。废话不多说，想了解更多的RN心灵鸡汤，自己去百度就好了。</p>    <p>搭建react-native的文章虽然很多，但大多数都是搭建js层面的，没有结合原生android和android开发去讲。这一套教程，将会更多的结合原生的安卓去讲react-native。</p>    <h2>1. 环境</h2>    <p>首先，我们需要搭建一个开发环境。无论是window/mac/linux中的哪一个，必须要具备的条件有以下几点</p>    <h3>1.1 安装jdk</h3>    <p>windows的话，在cmd中执行java -version看就行，mac/linux的话。在终端下，直接执行java -version命令进行查看，如果没有，请百度"jdk安装与环境变量配置"。直到使用java -version的时候，出现了如下图所示的信息，则证明你安装成功了(如图1.1.1)。</p>    <p><img src="https://simg.open-open.com/show/97fac3e2cbdb31e08c0828ecfcd364f3.png"></p>    <p>图1.1.1</p>    <h3>1.2 安装nodejs</h3>    <p>nodejs的官网上有各个系统的下载包，window下可以直接下载exe可执行的node，然后把node.exe所在的路径，添加到环境变量中即可，这样安装更加干净。直到，在windows下的CMD，或者mac下的终端任意目录下，输入node，可以出现如图2.3.1所示即可。</p>    <p><img src="https://simg.open-open.com/show/97553f2a470298e1a699dbe60d5ef6f6.png"></p>    <p>图2.3.1</p>    <h3>1.3 安装NPM</h3>    <p>一般来讲，安装了nodejs，也会顺带着安装上npm，不过有的时候，我们需要单独安装，windows下，如果使用了node.exe的话，可以自行百度一下 "windows安装npm" 按照说明安装npm，并且把npm添加到环境变量中去。直到在终端或者CMD任意目录下，执行npm出现如图1.3.1所示信息，则意味着，你安装成功了。</p>    <p><img src="https://simg.open-open.com/show/8da2397bd6da7188588778d3c6695597.png"></p>    <p>图1.3.1</p>    <h3>1.4 安装react-native-cli</h3>    <p>这个工具是react-native的命令行工具，是我们接下来运行工程的基础。安装的话，直接使用。</p>    <pre>  npm install -g react-native-cli</pre>    <p>命令进行安装即可，mac/linux下的话，可能会报错：</p>    <p>npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/react-native-cli'</p>    <p>这个时候，证明你的权限不够，可以在命令前面加上sudo：</p>    <pre>  sudo npm install -g react-native-cli</pre>    <h3>1.5 安装android sdk</h3>    <p>这里建议把android studio与android sdk一起安装，android的官网上即可下载与安装，有bundle版的话，更加的省事。</p>    <h3>1.6 安装安卓模拟器</h3>    <p>如果有安卓手机的话，更推荐使用安卓手机进行真机调试，如果没有的话，我们也可以通过安卓模拟器进行调试，windows的话，建议下载blue stack(下载安装即可)，mac/linux的话，可以使用android sdk里面自带的avd，创建新的设备进行调试。</p>    <h2>2. react-native的helloworld</h2>    <p>接下来，我们从一个使用了android studio与react-native的hello world入手。开启我们的react-native-android之旅。</p>    <h3>2.1 创建工程</h3>    <p>我们挑一个干净的文件夹来初始化我们的工程。windows的话，通过dos命令行(程序中查找cmd进入)。linux/mac的话，通过bash进入到文件夹下，执行以下命令创建工程，如图2.1.1</p>    <pre>  react-native init hellowReact</pre>    <p><img src="https://simg.open-open.com/show/9c7db1ee395caad39199eec104173f89.png"></p>    <p>图2.1.1</p>    <p>等待片刻，我们会看到生成了一个新的项目(helloReact)，生成的项目里面包含了IOS版本与Android版本的默认项目。</p>    <h3>2.2 用android studio打开</h3>    <p>此时我们可以使用android studio打开，新建项目下的android/app文件夹，请注意，打开的是app文件夹，如图2.2.1所示。</p>    <p><img src="https://simg.open-open.com/show/e6093aae3cebb2d110481fa35989984d.png"></p>    <p>图2.2.1</p>    <p>打开工程后，我们可以看到下方开始编译bundle，如图2.2.2。</p>    <p><img src="https://simg.open-open.com/show/6a82b5b2a3545560da62021e4be454b6.png"></p>    <p>图2.2.2</p>    <p>等待build gradle的过程比较漫长，需要耐心等待一下。build好之后，我们就能看到在我们的andriod studio中出现了新建的工程。</p>    <p>如果发现没有build，那么请看看控制台，是否提示没有安装什么gradle，如果是的话，点击进行安装即可，如图2.2.3。</p>    <p><img src="https://simg.open-open.com/show/132ae8c329c9d88042ab982331fd7723.png"></p>    <p>图2.2.3</p>    <h3>2.3 将安卓工程编译并安装到机器上</h3>    <p>在准备就绪后，工程上方的工具栏，会出现可以编译的按钮(如图2.3.1所示)我们点击绿色的运行按钮</p>    <p><img src="https://simg.open-open.com/show/4e4b174f23827490615b34af7202f857.png"></p>    <p>图2.3.1</p>    <p>如果使用了bluestack的话，请把bluestack打开，如果使用手机调试的话，请把手机的开发人员选项打开，并且把USB调试选项打开。我们这里直接使用了手机调试(如图2.3.2的调试列表中出现了我们连接的手机)。</p>    <p><img src="https://simg.open-open.com/show/aeccc6a966c9b6a51fcad72b8285313e.png"></p>    <p>图2.3.2</p>    <p>无论你用哪种方式，在点击完绿色的运行按钮之后，都会看到选择设备的列表。选择自己的设备，然后点击OK。开始编译(如图2.3.3)。</p>    <p><img src="https://simg.open-open.com/show/e015bba1eec477de63e42a07212c3a7a.png"></p>    <p>运行完成之后，我们果然看到了。。。。。。。BUG(如图2.3.4)</p>    <p><img src="https://simg.open-open.com/show/ea2ee9597179270de402775ac60e4317.png"></p>    <p>图2.3.4</p>    <p>不过，如果你运行到了这一步，恭喜你，你已经将react的安卓项目成功的编译并安装到手机上了。</p>    <p>出现这个BUG的原因主要是由于我们的app调试阶段回去远程寻找我们的js，而默认，它回去本地寻找，所以我们接下来要干两件事情，1. 搭建可以访问js的服务。 2.让手机上的react应用去按照这个服务寻找JS</p>    <h3>2.4 搭建服务</h3>    <p>用windows的CMD或者MAC/linux的终端，进入到hellowReact目录下(我们用react-native init创建的工程)，然后执行，结果如图2.4.1：</p>    <pre>  react-native start</pre>    <p><img src="https://simg.open-open.com/show/4efa5dc58f2315206b4f090dca6401cc.png"> 图2.4.1</p>    <p>运行成功后，我们看到react-native利用了本机的8081端口，开启了一个js的服务，我们访问一下(结果如图2.4.2所示)。</p>    <p><a href="/misc/goto?guid=4959649674826821236" rel="nofollow,noindex">http://localhost:8081/index.android.bundle?platform=android</a></p>    <p>(PS:第一次访问编译会有点慢)</p>    <p><img src="https://simg.open-open.com/show/b72d43f741aeb2f5c258973b7e6479d1.png"></p>    <p>图2.4.2</p>    <h3>2.5 设置app寻找js的地址</h3>    <p>接着，我们要进行第二步---让手机上的react应用去按照这个服务寻找JS</p>    <p>我们打开手机上那个报错的APP（hellowReact）,然后摇一摇。（是的，摇一摇，不过不是微信）此时会出现开发者工具，如图2.5.1所示</p>    <p><img src="https://simg.open-open.com/show/5d99a121af93a51223ced4a98d4bff5b.png"></p>    <p>图2.5.1</p>    <p>当然，你要是使用bluestack的话，也行，左侧工具栏里面有摇一摇。</p>    <p>如图2.5.2，点击Dev Settings，点击最下方的Debug server host & port for device，</p>    <p><img src="https://simg.open-open.com/show/f9d5df931259644819fd4f6e20af25fc.png"></p>    <p>图2.5.2</p>    <p>会弹出配置项，这个配置项就是寻找js的地址啦：</p>    <p>那么地址如何填呢？</p>    <p>如果是真机调试的话，手机最好和自己的电脑在一个局域网下（使用了同一个wifi也可以），如果是bluestack的话，则不用管这个了。</p>    <p>windows电脑，请在CMD命令下，输入ipconfig查看自己的ipv4地址。或者用电脑右下角的查看网络连接，来查看自己的ipv4地址。如果是mac/linux的话，查看一下网络设置，上面会有写。自己的ip地址。</p>    <p>在配置项里面填写自己的ip地址:8081，如图2.5.3</p>    <p><img src="https://simg.open-open.com/show/b3c92aaff5f4aac0f07c3e0b6841ef59.png"></p>    <p>图2.5.3</p>    <h3>2.6 重新加载js，并运行成功</h3>    <p>点击确定，返回主界面。再摇一摇手机，然后点击reload js。运行结果如图2.6.1</p>    <p><img src="https://simg.open-open.com/show/7a4bb0e6b6bd935eeb7576bf2b08ee4d.png"></p>    <p>图2.6.1</p>    <p>于是，我们的hello world就大功告成啦，至此，我们的React-Native-Android环境也算大功告成了。</p>    <p>上述讲解，可以在这里找到代码例子：</p>    <p><a href="/misc/goto?guid=4959675718517009124" rel="nofollow,noindex">https://github.com/houyu01/react-native-android-tutorial/tree/master/helloReact</a></p>    <p>不要走开，马上回来，下一篇，我们会介绍，如何在ReactNative中利用js编写我们想要的界面</p>    <p> </p>    <h2>系列文章</h2>    <p>[React Native Android安利系列]搭建React Native Android环境 <br> <a href="http://www.open-open.com/lib/view/open1469582257548.html">[React Native Android安利系列]创建简单 RN 应用(以js角度来看RN)</a><br> <a href="http://www.open-open.com/lib/view/open1469582062537.html">[React Native Android安利系列]原生小知识(创建activity并跳转)</a></p>    <p>来自：https://segmentfault.com/a/1190000006037447</p>    <p> </p>