在windows下搭建reactNative環(huán)境

第一步安裝jdk

1.安裝jdk18,安裝后

2.點(diǎn)擊系統(tǒng)變量下面的新建按鈕,變量名JAVA_HOME(代表你的JDK安裝路徑),值對(duì)應(yīng)的是你的JDK的安裝路徑

3.繼續(xù)在系統(tǒng)變量里面新建一個(gè)CLASSPATH變量,其變量值如下圖所示

4.在你的系統(tǒng)變量里面找一個(gè)變量名是PATH的變量,需要在它的值域里面追加一段如下的代碼

此時(shí)JDK的環(huán)境變量配置就完成了

5.測(cè)試自己所配置的環(huán)境變量是否正確

  • WINDOWS+R鍵,輸入cmd,進(jìn)入命令行界面
  • 輸入java -version命令,可以出現(xiàn)如下圖的提示,你可以看你安裝的JDK版本
  • 輸入javac命令
  • 輸入java命令

第二步 安裝 Android SDK

Android Studio 默認(rèn)會(huì)安裝最新版本的 Android SDK。然而目前編譯 React Native 應(yīng)用需要的是Android 6.0 (Marshmallow)版本的 SDK。

1.在 Android Studio 的歡迎界面中找到 SDK Manager。點(diǎn)擊"Configure",然后就能看到"SDK Manager"

2.在 SDK Manager 中選擇"SDK Platforms"選項(xiàng)卡,然后在右下角勾選"Show Package Details"。展開Android 6.0 (Marshmallow)選項(xiàng),確保勾選了下面這些組件

  • Android SDK Platform 23
  • Intel x86 Atom_64 System Image(官方模擬器鏡像文件,使用非官方模擬器不需要安裝此組件)

3.然后點(diǎn)擊"SDK Tools"選項(xiàng)卡,同樣勾中右下角的"Show Package Details"。展開Android SDK Build-Tools選項(xiàng),確保選中了 React Native 所必須的23.0.1版本。

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

    因?yàn)镽eact Native 需要通過環(huán)境變量來了解你的 Android SDK 裝在什么路徑,從而正常進(jìn)行編譯,路徑為指向你的 Android SDK 所在的目錄,默認(rèn)安裝時(shí)候c:\Users\你的用戶名\AppData\Local\Android\Sdk

第三步安裝相應(yīng)的依賴

1.安裝Node、React Native 命令行工具

npm install -g  react-native-cli

2.安裝Python2,后設(shè)置環(huán)境變量

3.安裝 yarn 后設(shè)置鏡像源(非必須)

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

第四步安裝模擬器

模擬器如Genymotion,成功安裝后做以下的配置Android SDK 進(jìn)行橋接

第五步創(chuàng)建新項(xiàng)目編譯并運(yùn)行 React Native 應(yīng)用

1.使用 React Native 命令行工具來創(chuàng)建一個(gè)名為AwesomeProject的新項(xiàng)目

react-native init AwesomeProject

// 提示:你可以使用--version參數(shù)(注意是兩個(gè)杠)創(chuàng)建指定版本的項(xiàng)目。例如react-native init MyApp --version 0.44.3。注意版本號(hào)必須精確到兩個(gè)小數(shù)點(diǎn)

2.確保你先運(yùn)行了模擬器或者連接了真機(jī),然后在你的項(xiàng)目目錄中運(yùn)行react-native run-android

cd AwesomeProject
react-native run-android

3.如果配置沒有問題,你應(yīng)該可以看到應(yīng)用自動(dòng)安裝到設(shè)備上并開始運(yùn)行

4.修改項(xiàng)目

現(xiàn)在你已經(jīng)成功運(yùn)行了項(xiàng)目,我們可以開始嘗試動(dòng)手改一改了

  • 使用你喜歡的文本編輯器打開App.js并隨便改上幾行
  • 按兩下 R 鍵,或是在開發(fā)者菜單中選擇 Reload JS,就可以看到你的最新修改

參考鏈接

  1. reactNative搭建開發(fā)環(huán)境

    ?

?著作權(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)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

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