React native + Android Studio + genymotion + Ubuntu 16.04

阿新 • • 發佈：2018-11-17

文章名字很長，但是似乎又不可刪減～

這篇部落格將主要介紹怎麼在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服務需要一直啟動著～