Ubuntu下搭建React Native環(huán)境

Ubuntu下搭建React Native環(huán)境

Node 安裝

windows下我們可以直接從Nodejs官網(wǎng)下載安裝包这敬,雙擊安裝航夺;

linux下我們雖然也可以下載node源代碼來(lái)安裝,但推薦使用nvm來(lái)安裝node崔涂,切換版本非常方便阳掐!

注: 用nvm安裝完node后,可能每次啟動(dòng)一個(gè)終端冷蚂,都會(huì)提示commond not found,我們需要執(zhí)行以下命令:

$ nvm alias default stable

JAVA環(huán)境配置

React Native目前需要Android Studio2.0或更高版本缭保,而Android Studio又需要JAVA環(huán)境,所以先來(lái)配置JAVA環(huán)境吧(如果已經(jīng)安裝了JAVA, 請(qǐng)?zhí)^(guò)這一步蝙茶,可通過(guò)java -version來(lái)查看當(dāng)前java版本)艺骂!

1.我們先去JAVA官網(wǎng)下載所需的JDK。

2017-05-31 23-17-45屏幕截圖.png

2.在/usr/local目錄下新建java文件夾,并將下載的JDK復(fù)制到該文件夾下:

$ sudo mkdir /usr/local/java
$ sudo cp jdk-8u131-linux-x64.tar.gz /usr/local/java

3.解壓源碼

$ sudo tar xvf jdk-8u131-linux-x64.tar.gz

4.設(shè)置環(huán)境變量

$ sudo gedit /etc/profile
export JAVA_HOME=/usr/local/java/jdk1.8.0_25  # 配置jdk的主目錄,此處根據(jù)JDK的路徑來(lái)配置
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
export PATH=${JAVA_HOME}/bin:$PATH

配置完成后執(zhí)行命令source /etc/profile, 然后在終端輸入java -version查看是否安裝完畢:

2017-05-31 23-46-10屏幕截圖.png

安裝 Android Studio

1.下載Android Studio

2.解壓下載到的安裝包隆夯,cd 到bin文件夾下钳恕,執(zhí)行./studio.sh命令别伏,我們就能看到如下界面

2017-05-31 23-55-58屏幕截圖.png

3.先不急著安裝,按照React Native官網(wǎng)上來(lái)講忧额,我們需要在安裝的時(shí)候做些改動(dòng)(中文可以去React Native中文網(wǎng)查看)

2017-06-01 00-02-51屏幕截圖.png

選擇Android Virtual Device:

2017-06-01 00-04-04屏幕截圖.png

然后就是漫長(zhǎng)的等待他下載完畢啦:

2017-06-01 00-09-29屏幕截圖.png

4.當(dāng)下載完畢后厘肮,我們還需要下載一些SDK:

SDK Platforms窗口中,選擇Show Package Details睦番,然后在Android 6.0 (Marshmallow)中勾選Google APIs类茂、Android SDK Platform 23Intel 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(必須是這個(gè)版本)兢哭。然后還要勾選最底部的Android Support Repository.

2017-06-02 00-07-28屏幕截圖.png
2017-06-02 00-11-16屏幕截圖.png

5.當(dāng)SDK下載好后,我們還需要配置ANDROID_HOME環(huán)境變量:

確保ANDROID_HOME環(huán)境變量正確地指向了你安裝的Android SDK的路徑丑搔。

具體的做法是把下面的命令加入到~/.profile文件中厦瓢。如果你使用的是其他的shell,則選擇對(duì)應(yīng)的配置文件:

# 如果你不是通過(guò)Android Studio安裝的sdk啤月,則其路徑可能不同,請(qǐng)自行確定清楚劳跃。
export ANDROID_HOME=${HOME}/Android/Sdk

然后使用下列命令使其立即生效(否則重啟后才生效):

source ~/.profile

可以使用echo$ANDROID_HOME檢查此變量是否已正確設(shè)置谎仲。

  1. 將Android SDK的Tools目錄添加到PATH變量中,以便在終端中運(yùn)行一些Android工具刨仑,在~/.profile文件中添加:

export PATH=${PATH}:${ANDROID_HOME}/tools

export PATH=${PATH}:${ANDROID_HOME}/platform-tools

安裝React Native命令行工具


$ npm install -g react-native-cli

由于一些大家都懂的原因郑诺,在國(guó)內(nèi)下載npm包比較慢,還好我們可愛(ài)的淘寶幫我們備份了npm源:

# 此條命令將npm源設(shè)置成國(guó)內(nèi)淘寶提供的鏡像杉武,速度更快哦
$ npm configsetregistry https://registry.npm.taobao.org

當(dāng)然如果你使用yarn,可以這么設(shè)置:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安裝完后辙诞,我們就可以來(lái)嘗試構(gòu)建第一個(gè)項(xiàng)目了:

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

有時(shí)候往往應(yīng)該先運(yùn)行以下命令:

$ react-native start

如果一切順利,你將會(huì)在機(jī)器上看到一下這張圖:D

2017-06-03 00-13-12屏幕截圖.png

優(yōu)化開(kāi)發(fā)效率

watchman

Watchman是由Facebook提供的監(jiān)視文件系統(tǒng)變更的工具轻抱。安裝此工具可以提高開(kāi)發(fā)時(shí)的性能(packager可以快速捕捉文件的變化從而實(shí)現(xiàn)實(shí)時(shí)刷新)飞涂。

執(zhí)行以下命令安裝watchman:

git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.7.0# 這是本文發(fā)布時(shí)的最新穩(wěn)定版本
./autogen.sh
./configure
make
sudo make install

安裝錯(cuò)誤解決

1.安裝watchman時(shí)如果提示如下信息:


./autogen.sh: 9: ./autogen.sh: aclocal: not found

./autogen.sh: 10: ./autogen.sh: autoheader: not found

./autogen.sh: 11: ./autogen.sh: automake: not found

./autogen.sh: 12: ./autogen.sh: autoconf: not found

丟失的aclocal是automake包的一部分,因此要先安裝automake:


$ sudo apt-get install automake

2.安裝watchman時(shí)如果提示如下信息:


fatal error: Python.h: 沒(méi)有那個(gè)文件或目錄

需要安裝python-dev:


$ sudo apt-get install python-dev

Gradle Daemon

開(kāi)啟Gradle Daemon可以極大地提升java代碼的增量編譯速度祈搜。

1.下載Gradle,將其解壓到/usr/local/opt目錄下

2.在/etc/profile文件中添加如下配置:


export GRADLE_HOME=/usr/local/opt/gradle-3.5

export PATH=$PATH:$GRADLE_HOME/bin

3.執(zhí)行source /etc/profile使之生效

4.執(zhí)行g(shù)radle -v確定安裝成功

5.配置gradle deamon


$ touch~/.gradle/gradle.properties&&echo"org.gradle.daemon=true">>~/.gradle/gradle.properties

安裝Genymotion

比起Android Studio自帶的原裝模擬器较店,Genymotion是一個(gè)性能更好的選擇。

Genymotion需要提前安裝好virtualbox

用命令行安裝更為方便:


$ wget -q https://www.virtualbox.org/download/oracle_vbox.asc -O-|sudo apt-key add -

$ sudo apt-get update

$ sudo apt-get install virtualbox

之后我們從Genymotion官網(wǎng)下載Genymotion并安裝:

$ chmod +x genymotion-2.9.0-linux_x64.bin
$ sudo ./genymotion-2.6.0-linux_x64.bin -d ~

進(jìn)入到~/genymotion目錄下,執(zhí)行./genymotion來(lái)啟動(dòng)

結(jié)束語(yǔ)

鄙人不是什么大牛容燕,文章若有錯(cuò)誤之處梁呈,敬請(qǐng)指出,與君共勉蘸秘!

參考資料

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蝗茁,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子寻咒,更是在濱河造成了極大的恐慌评甜,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,657評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件仔涩,死亡現(xiàn)場(chǎng)離奇詭異忍坷,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)熔脂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門佩研,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人霞揉,你說(shuō)我怎么就攤上這事旬薯。” “怎么了适秩?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,057評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵绊序,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我秽荞,道長(zhǎng)骤公,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,509評(píng)論 1 293
  • 正文 為了忘掉前任扬跋,我火速辦了婚禮阶捆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘钦听。我一直安慰自己洒试,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布朴上。 她就那樣靜靜地躺著垒棋,像睡著了一般。 火紅的嫁衣襯著肌膚如雪痪宰。 梳的紋絲不亂的頭發(fā)上叼架,一...
    開(kāi)封第一講書(shū)人閱讀 51,443評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音酵镜,去河邊找鬼碉碉。 笑死,一個(gè)胖子當(dāng)著我的面吹牛淮韭,可吹牛的內(nèi)容都是我干的垢粮。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼靠粪,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蜡吧!你這毒婦竟也來(lái)了毫蚓?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,129評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤昔善,失蹤者是張志新(化名)和其女友劉穎元潘,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體君仆,經(jīng)...
    沈念sama閱讀 45,561評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡翩概,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評(píng)論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了返咱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片钥庇。...
    茶點(diǎn)故事閱讀 39,902評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖咖摹,靈堂內(nèi)的尸體忽然破棺而出评姨,到底是詐尸還是另有隱情,我是刑警寧澤萤晴,帶...
    沈念sama閱讀 35,621評(píng)論 5 345
  • 正文 年R本政府宣布吐句,位于F島的核電站,受9級(jí)特大地震影響店读,放射性物質(zhì)發(fā)生泄漏嗦枢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評(píng)論 3 328
  • 文/蒙蒙 一两入、第九天 我趴在偏房一處隱蔽的房頂上張望净宵。 院中可真熱鬧,春花似錦裹纳、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,838評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至阻星,卻和暖如春朋鞍,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背妥箕。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,971評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工滥酥, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人畦幢。 一個(gè)月前我還...
    沈念sama閱讀 48,025評(píng)論 2 370
  • 正文 我出身青樓坎吻,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親宇葱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子瘦真,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,116評(píng)論 25 707
  • 盡管在移動(dòng)開(kāi)發(fā)中,原生APP的開(kāi)發(fā)成本很高,但現(xiàn)階段基于原生開(kāi)發(fā)仍然是必須的,因?yàn)閃eb的用戶體驗(yàn)仍無(wú)法超越Nat...
    奔跑的大橙子閱讀 5,396評(píng)論 0 11
  • 從2017年元旦后加入了行動(dòng)派的鄭州群,繼而加入了繪畫小組您机。 學(xué)習(xí)手繪的初衷穿肄,就是為了學(xué)習(xí)色彩搭配技巧,把思維導(dǎo)圖...
    知予君閱讀 542評(píng)論 4 14
  • 今天我們的老師沒(méi)有來(lái)际看,我們自習(xí)了一天咸产。老師給我們布置了作業(yè),但是我們的作業(yè)都是沒(méi)有講過(guò)的仿村,所以也沒(méi)有辦法做锐朴,只能自...
    宋肖鵬閱讀 178評(píng)論 0 0
  • 畫節(jié)有感 客別三年到濰坊,東風(fēng)不改舊模樣蔼囊。 街柳依稀抽嫩綠焚志,花絮隨性自飛揚(yáng)。 中國(guó)畫節(jié)邀高士畏鼓,藝壇峰會(huì)聚新創(chuàng)酱酬! 閉...
    逸塵居士閱讀 238評(píng)論 0 1