window下搭建React Native Android開(kāi)發(fā)環(huán)境

可以先瀏覽一下中文翻譯的 開(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

初始完之后的目錄如下圖:


Paste_Image.png

5、創(chuàng)建項(xiàng)目

react-native init reactNative

由于網(wǎng)絡(luò)原因,可能需要等待一些時(shí)間

Paste_Image.png

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

Paste_Image.png

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

Paste_Image.png

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

Paste_Image.png

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

Paste_Image.png

7、run android app

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

react-native run-android

Paste_Image.png

這行命令主要是編譯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ì)

Paste_Image.png

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

Paste_Image.png

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

Paste_Image.png

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

Paste_Image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 可以先瀏覽一下中文翻譯的開(kāi)發(fā)文檔具體了解一下關(guān)于React Native,想要查看官方文檔可以點(diǎn)這里。 在官方文檔...
    程序人生_小龍閱讀 519評(píng)論 3 4
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,048評(píng)論 25 709
  • 盡管在移動(dòng)開(kāi)發(fā)中,原生APP的開(kāi)發(fā)成本很高,但現(xiàn)階段基于原生開(kāi)發(fā)仍然是必須的,因?yàn)閃eb的用戶(hù)體驗(yàn)仍無(wú)法超越Nat...
    奔跑的大橙子閱讀 5,481評(píng)論 0 11
  • by 明光 最近感恩的情愫很濃。 在學(xué)習(xí)方面,創(chuàng)文的老師們的溫柔、論語(yǔ)課的石老師的謙卑,特別感動(dòng)我,他們都在業(yè)務(wù)、...
    明光照耀閱讀 207評(píng)論 2 0
  • 6 腳踏車(chē)載著你淺淺的微笑 沐浴在春日的晚風(fēng)里 暈開(kāi)的云霞映紅了臉蛋兒 填滿(mǎn)了初見(jiàn)你的雙眸 遇見(jiàn)你,愛(ài)情的種子萌了...
    楓橋葉落閱讀 477評(píng)論 2 2

友情鏈接更多精彩內(nèi)容