Android混合開發(fā)之 ReactNative2--環(huán)境搭建

1. 下載node

下載地址 https://nodejs.org/en/
下載之后直接雙擊安裝

image.png

需要注意的是,node官網(wǎng)往往會給出兩個默認(rèn)的版本,一般左邊的穩(wěn)定版,后邊的是最新版(先選用穩(wěn)定版)

測試node是否安裝成功的方法:

打開cmd命令工具,輸入node -v 如果出現(xiàn)下圖所示則表示成功

image.png

2. 設(shè)置鏡像的下載地址

因?yàn)榈谝徊揭呀?jīng)成功安裝完了node,現(xiàn)在直接打開cmd命令行,分別輸入以下命令:

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

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

3.下載Python2

版本必須是2.x 不支持3.x,JDK的版本必須是1.8 目前不支持1.9或更高版本
下載地址:
https://www.python.org/downloads/release/python-2715/

image.png

安裝時, 注意勾選 Add python.exe to Path,選項(xiàng),這樣就可以在安裝完成后,不用手動去添加環(huán)境變量。


image.png

安裝完,打開cmd.exe,輸入python,然后enter,如果能成功返回ptython的版本號等信息,則說明安裝成功。

4.安裝React Native命令行工具(react-native-cli)

打開cmd命令行鍵入以下命令。
npm install -g yarn react-native-cli


image.png

安裝成功后的樣子
(yarn是facebook提供的替代npm的工具,可以加速node模塊的下載。ReactNative的命令行工具用于執(zhí)行創(chuàng)建,初始化,更新項(xiàng)目,運(yùn)行打包服務(wù)等任務(wù))

安裝完成后,同理設(shè)置一樣鏡像源
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

image.png

成功后的樣子

5. 這些環(huán)境如果已經(jīng)安裝過可以跳過

a.安裝jdk
需要jdk1.8以上版本,具體安裝教程:http://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html
安裝完成之后,打開cmd.exe,輸入
java -version
如果成功返回版本信息,則說明安裝成功。

b.配置ANDROID_HOME環(huán)境變量


image.png

新建系統(tǒng)環(huán)境變量,填寫android sdk的安裝目錄

c.檢查android studio的sdkmanager是否有東西沒有安裝,目前編譯RN應(yīng)用需要android8.1版本的sdk,要確保已經(jīng)安裝,另外要確保android8.1下面的android sdk platform 27以及Intelx86 Atom_64 System Image也安裝了

image.png

6.創(chuàng)建新的RN項(xiàng)目

硬盤上新建文件夾,然后打開cmd.exe,切換到該目錄,然后執(zhí)行
react-native init 項(xiàng)目名
這個過程可能會耗費(fèi)一段時間,請耐心等待,初始化完成之后,切換到新建的項(xiàng)目文件夾中,然后執(zhí)行(執(zhí)行之前記得檢查好虛擬機(jī)或者手機(jī)是否已經(jīng)處于調(diào)試模式,不要同時連接多臺虛擬機(jī)或手機(jī))
react-native run-android
等待編譯完成(第一次編譯可能會很慢),直到在android的虛擬機(jī)上出現(xiàn) WelCome to react-native,則大功告成,修改index.js,保存之后,在鼠標(biāo)移動到虛擬機(jī)上,然后點(diǎn)擊兩次鍵盤R,就會觸發(fā)新代碼更新到虛擬機(jī)。(真機(jī)的話搖一搖)


image.png

運(yùn)行之后可能出現(xiàn)的錯誤
1.react native skipping device for app:debug:unknown api level
安裝不成功,扯掉數(shù)據(jù)線,重新連接,重新打開調(diào)試模式(多試幾次)

2.錯誤1:unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server
手機(jī)滿屏紅
在cmd命令行中 先切換到項(xiàng)目的目錄 然后運(yùn)行如下圖中的命令:
或者在android studio的Terminal中鍵入:


image.png

再重新運(yùn)行一次 react-native run-android
3.如果有同學(xué)的adb無法被識別為命令,即:adb不是內(nèi)部或外部命令 也不是可運(yùn)行程序
找到android sdk platform-tools所在目錄,并將其加入PATH路徑

4.如果編譯運(yùn)行過程中出現(xiàn)了 提示找不到SDK路徑的錯誤


image.png

解決辦法:1.檢查環(huán)境變量里的android_home和path里的路徑地址是否正確;
2.在rn項(xiàng)目android文件夾下,新建local.properties,并且在文件中寫入SDK的路徑
如我的路徑是:sdk.dir=C:\myspace\Android_SDK

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

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

  • 前言 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ),沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí) 本人...
    珍此良辰閱讀 2,401評論 3 9
  • 開篇 盡管在移動開發(fā)中,原生APP的開發(fā)成本很高,但現(xiàn)階段基于原生開發(fā)仍然是必須的,因?yàn)閃eb的用戶體驗(yàn)仍無法超越...
    醉葉惜秋閱讀 1,587評論 0 0
  • 盡管在移動開發(fā)中,原生APP的開發(fā)成本很高,但現(xiàn)階段基于原生開發(fā)仍然是必須的,因?yàn)閃eb的用戶體驗(yàn)仍無法超越Nat...
    奔跑的大橙子閱讀 5,474評論 0 11
  • 兩絲希望 晚上六點(diǎn)下班的時候,文哥給大家開夕會總結(jié)今天的工作流程。小夏作為9個新人中第一個出單的給龍虎門的伙伴做分...
    彭校長閱讀 984評論 2 2
  • 臨近崩潰邊緣?。?! 從3月到現(xiàn)在,原以為心態(tài)什么的我會把握極好,到這一刻,我才領(lǐng)會到別人為什么說會崩潰到大哭,因?yàn)?..
    樾曦閱讀 516評論 0 0

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