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服務需要一直啓動着~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章