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。
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
查看是否安裝完畢:
安裝 Android Studio
1.下載Android Studio
2.解壓下載到的安裝包隆夯,cd 到bin文件夾下钳恕,執(zhí)行./studio.sh
命令别伏,我們就能看到如下界面
3.先不急著安裝,按照React Native官網(wǎng)上來(lái)講忧额,我們需要在安裝的時(shí)候做些改動(dòng)(中文可以去React Native中文網(wǎng)查看)
選擇Android Virtual Device
:
然后就是漫長(zhǎng)的等待他下載完畢啦:
4.當(dāng)下載完畢后厘肮,我們還需要下載一些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
(必須是這個(gè)版本)兢哭。然后還要勾選最底部的Android Support Repository
.
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è)置谎仲。
- 將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
優(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)指出,與君共勉蘸秘!