可以先瀏覽一下中文翻譯的 開(kāi)發(fā)文檔 具體了解一下關(guān)于React Native,想要查看官方文檔可以點(diǎn)這里。
在官方文檔中,只給出在Window上安裝React Native的教程,沒(méi)有給Mac下的教程,我在網(wǎng)上找了半天,找了部分內(nèi)容,又根據(jù)自己的理解整理了一下
1、安裝Java
這里需要注意對(duì)環(huán)境變量的設(shè)置,可以根據(jù)java -version來(lái)檢測(cè)一下
2、安裝SDK
這里需要注意設(shè)置環(huán)境變量ANDROID_HOME:Android SDK Manager的位置 例如:(PATH => E:\Android\sdk)設(shè)置環(huán)境變量PATH:例如:(PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)
3、安裝node
這貨是基于js的,node.js輕量級(jí)的Web服務(wù)器,想要是React Native跑起來(lái)需要安裝node, 如果沒(méi)有安裝node.js,先去官網(wǎng)安裝node.js,最好是4.1以上版本,來(lái)吧,猛戳這里,下載node.js,找好對(duì)應(yīng)的版本,然后去安裝就可以了。
大家可以通過(guò)node -v的命令來(lái)測(cè)試NodeJS是否安裝成功
4、安裝react-native命令行工具React-native-cli
安裝React-native-cli需要用到git,如果沒(méi)有配置git,需要先下載對(duì)應(yīng)的客戶(hù)端,然后將git加入path環(huán)境變量即可,git的下載可以從群共享里面。
git配置完成后可以clone React-native-cli了,建議大家到將React-native-cli克隆到某個(gè)盤(pán),不要在c盤(pán)直接clone
git clone https://github.com/facebook/react-native.git
cd react-native/react-native-cli
npm install -g
初始完之后的目錄如下圖:

5、創(chuàng)建項(xiàng)目
react-native init reactNative
由于網(wǎng)絡(luò)原因,可能需要等待一些時(shí)間

執(zhí)行完之后的文件目錄

6、運(yùn)行package
運(yùn)行React Native需要先啟動(dòng) server,按照網(wǎng)上的一些教程需要運(yùn)行node_modules\react-native\packager\packager.js,但是我們發(fā)現(xiàn),這個(gè)文件夾下面好像是沒(méi)有這個(gè)文件,但是我們發(fā)現(xiàn)了一個(gè)packager.sh,打開(kāi)后發(fā)現(xiàn)是一個(gè)node命令
THIS_DIR=$(dirname "$0")
node "$THIS_DIR/../local-cli/cli.js" start "$@"
看到這里我們可以試著運(yùn)行/local-cli/cli.js看看能不能起來(lái)
node cli.js start

哈哈,服務(wù)啟動(dòng)了

可以看見(jiàn)服務(wù)器端開(kāi)啟了8081端口,可以用瀏覽器訪(fǎng)問(wèn)http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的腳本

7、run android app
服務(wù)端也運(yùn)行起來(lái)了,剩下的就是將工程編譯好了,運(yùn)行到手機(jī)上了,可以使用如下命令,這里運(yùn)行命令的時(shí)候需要新開(kāi)一個(gè)命令行窗口
react-native run-android

這行命令主要是編譯
react-native-cli\reactNative\android工程,編譯過(guò)程當(dāng)中可能會(huì)下載相關(guān)的依賴(lài)包,耐心等待即可,你也可以使用Android Studio 來(lái)編譯,建議使用模擬器,當(dāng)初測(cè)試的時(shí)候,手機(jī)連不上我開(kāi)啟的那個(gè)服務(wù)器,導(dǎo)致頁(yè)面沒(méi)有刷新過(guò)來(lái),還是用模擬器保險(xiǎn)一些,運(yùn)行后,如果出現(xiàn)這個(gè)界面,說(shuō)明是你的服務(wù)器地址沒(méi)有設(shè)對(duì)

解決辦法,搖晃手機(jī)或者點(diǎn)擊menu鍵,這時(shí)候會(huì)出現(xiàn)一設(shè)置對(duì)話(huà)框

點(diǎn)擊Dev Setting,選擇Debug server host for device,輸入你的電腦的ip地址就可以,電腦和手機(jī)需要在同一wifi下面

如果屏幕的紅色消失,出現(xiàn)如下界面,說(shuō)明運(yùn)行成功
