React native + Android Studio + genymotion + Ubuntu 16.04

文章名字很长，但是似乎又不可删减～

这篇博客将主要介绍怎么在Ubuntu下安装React native + Android Studio + genymotion，为的是能够在linux下顺利的使用React Native开发安卓应用。实在是不想在Window下做开发了，私心觉得忒麻烦。

安装的步骤有点的复杂，各位看官如果想复制这么一个环境还请认真的看下去（即使按照原来的步骤复制，我也不敢保证绝对正确的结果，所以如果出现问题可以给我发邮件：[email protected]）

准备工作

配置nodejs环境

$ sudo apt install nodejs
$ sudo apt install nodejs-legacy
$ sudo apt install npm

在网上看到不少人吐槽这种安装方式，讲道理我第一次配置nodejs环境的时候似乎也被这种方法坑过，但是现在记不起来哪里坑了，但是目前在这种环境下运行没什么问题，也就不太计较了。

安装watchman

Watchman 是 facebook 的一个开源项目，它开源用来监视文件并且记录文件的改动情况，当文件变更它可以触发一些操作,例如执行一些命令等等

ps：首先你需要安装git，这个很简单，我就不写太多了

$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v4.7.0  # the latest stable release
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install

安装cnpm

主要是为了加快安装的速度，因为默认的npm源是在国外，在国内访问速度并不理想，所以如果不想在下载过程中卡半天建议装一下这个

$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

但是这样似乎还不太够，因为之后还要使用React native 初始化命令，其默认调用的是npm，这个时候再建议你修改一下npm的源，直接改掉npm的源地址换成淘宝的镜像，而不是使用另外一个命令代替它。

$ sudo npm config set registry https://registry.npm.taobao.org

安装flow

flow是Facebook开源的 JavaScript 静态类型检查器，旨在发现 JS 程序中的类型错误，以提高程序员的效率和代码质量。

$ sudo npm install -g flow-bin

安装React Native

$ sudo cnpm install -g react-native-cli

注意这边不需要再去安装react-native。别踩了，是个坑，我刚踩完的。

安装配置Android studio （include SDK）

因为现在Google将策略改为在Android studio上管理Android SDK，所以现在你只需要正确的安装好Android studio，SDK就自己来了。

安装Android studio

这里给官网的教程
https://developer.android.com/studio/install.html
各位可以按照教程来，没毛病。在执行

$ ./studio

的时候，如果出现proxy错误，直接忽视就好了。我尝试过解决，不过似乎并不理想。

然后安装的过程中会提示你选择SDK的安装路径，不管你改不改这个路径，你都应该记住它，很重要，之后用得到。

配置SDK

安装完毕之后你需要配置SDK，打开Android studio，进入设置（file->setting) 在左上角的搜索框中输入sdk，会跳转到SDK配置界面，在这个界面内如下操作：

在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository.

安装配置genymotion

分两个步骤，首先你要安装virtualbox，然后再装genymotion

安装virtualbox

在之前我已经写了一篇简单的博客介绍怎么在Ubuntu 16.04下安装这个东东了，这里还是给各位写一些过程，方便各位。

$ sudo sh -c 'echo "deb http://download.virtualbox.org/virtualbox/debian xenial contrib" >> /etc/apt/sources.list.d/virtualbox.list'
$ wget -q https://www.virtualbox.org/download/oracle_vbox_2016.asc -O- | sudo apt-key add -
$ sudo apt update
$ sudo apt install virtualbox-5.0

其实是添加一个源，然后通过源来安装。我试过官方给的安装包，报错，很难受。

安装genymotion

先要去它的官网上注册一个账号，www.genymotion.com （提醒：不是www.genymotion.net）先试用好了，有个30天先凑合吧。然后根据官网的步骤把安装文件下载下来，是个*.bin文件

$ chmod +x genymotion-2.9.0-linux_x64.bin
$ ./genymotion-2.9.0-linux_x64.bin

安装完毕之后需要使用你刚才注册的账号登录。

为genymotion配置SDK

genymotion是带有默认的SDK的，可是如果要部署和调试应用的话，应该使用上面你用Android studio 配置的。
1. 打开genymotion
2. 点击主页面上的setting
3. 配置如下
这里写图片描述

新建虚拟机

这个操作非常的简单，几乎不需要你做很多操作。取个自己喜欢的虚拟机名字就行了

配置工程

初始化工程

$ react-native init sampleAPP

如果这里你没有将npm的源改为淘宝的，可能会非常非常的慢。

为工程配置SDK

$ cd sampleAPP/android
$ vim local.properties

local.properties文件的内容如下，

sdk.dir = <sdk_path>
ANDROID_HOME = <sdk_path>

启动npm start

$ cd sampleAPP
$ npm start

启动虚拟机

选中你刚才新建的虚拟机，启动

开始部署应用

$ cd sampleAPP
$ react-native run-android

这个时候打开你的虚拟机，找到sampleAPP应用，打开就能看到下面的图片了
这里写图片描述

大功告成，记住在～在开发的时候npm服务需要一直启动着～