微站網(wǎng)建站系統(tǒng),手機(jī)之家報價,做網(wǎng)站用哪個軟件好,汽車網(wǎng)站頁面設(shè)計從零開始在 Windows 上搭建 React Native 開發(fā)環(huán)境#xff1a;一次講透所有坑點 你是不是也曾在搜索“ react native搭建環(huán)境 ”時#xff0c;被各種過時教程、零碎步驟和莫名其妙的報錯勸退#xff1f;明明照著文檔一步步來#xff0c;結(jié)果 gradlew 卡死、 python n…從零開始在 Windows 上搭建 React Native 開發(fā)環(huán)境一次講透所有坑點你是不是也曾在搜索“react native搭建環(huán)境”時被各種過時教程、零碎步驟和莫名其妙的報錯勸退明明照著文檔一步步來結(jié)果gradlew卡死、python not found、Metro 啟動失敗……最后只能放棄轉(zhuǎn)投 Expo 的懷抱別急。今天我們就用一篇完整、真實、可落地的文章帶你把整個流程走通。不跳步、不省略每一個環(huán)節(jié)都告訴你“為什么必須這么做”而不是只扔給你一堆命令。我們聚焦Windows 平臺下的原生 CLI 搭建方式——雖然比 Expo 復(fù)雜一些但它讓你真正掌控項目底層是進(jìn)階開發(fā)、集成原生模塊、接入第三方 SDK 的必經(jīng)之路。為什么 React Native 在 Windows 上曾讓人頭疼React Native 最初由 Facebook 為 iOS 和 Android 雙平臺設(shè)計早期開發(fā)體驗主要圍繞 macOS 展開。而 Windows 用戶要構(gòu)建 Android 應(yīng)用就必須依賴一套完整的 Java 工具鏈 Android SDK 構(gòu)建腳本支持。這意味著你在 Windows 上跑一個.js文件背后其實調(diào)用了- Node.js 運(yùn)行 JS 打包服務(wù)- Python 執(zhí)行某些舊版構(gòu)建邏輯- JDK 編譯原生代碼- Gradle 調(diào)度整個構(gòu)建流程- ADB 安裝 APK 到設(shè)備任何一個環(huán)節(jié)出問題都會導(dǎo)致“初始化項目成功但 run-android 報錯”。所以“react native搭建環(huán)境”的本質(zhì)其實是協(xié)調(diào)多個異構(gòu)系統(tǒng)組件協(xié)同工作的過程。下面我們從最基礎(chǔ)的開始一環(huán)扣一環(huán)地配置。第一步安裝 Node.js —— 整個生態(tài)的地基React Native 是基于 JavaScript 的框架而 JavaScript 要運(yùn)行在非瀏覽器環(huán)境中就需要Node.js。它不只是用來執(zhí)行npx react-native init命令更是啟動 Metro 打包服務(wù)器的核心引擎。沒有它連 JS bundle 都打不出來。? 推薦操作訪問 https://nodejs.org下載LTS 版本長期支持目前推薦v18.x 或 v20.x- 不要用最新版如 v21部分依賴尚未兼容安裝時選擇.msi安裝包Windows Installer勾選“Add to PATH”選項讓系統(tǒng)自動配置環(huán)境變量??重要提示安裝路徑不要包含中文或空格例如不要裝在C:Users張三Desktop odejs否則后續(xù) Gradle 構(gòu)建可能失敗。驗證是否安裝成功打開命令提示符CMD 或 PowerShell輸入node -v npm -v你應(yīng)該看到類似輸出v18.17.0 9.6.7如果提示node 不是內(nèi)部或外部命令說明環(huán)境變量沒配好請重新安裝并確保勾選添加到 PATH。?熱詞匹配點這一步就是“react native搭建環(huán)境”的起點Node.js 是基石中的基石。第二步Python 與 JDK 配置 —— 很多人栽在這里你以為寫 JS 就不用管 Java 和 Python錯。盡管 React Native 主體用 JS 編寫但在構(gòu)建 Android 工程時仍然會調(diào)用大量由 Python 編寫的腳本尤其是舊版本工具鏈以及 Java 編譯器來打包 APK。先說結(jié)論你需要什么組件推薦版本是否必需Python2.7.18? 必需不是 Python 3JDKOpenJDK 8 或 11? 必需? 為什么必須是 Python 2.7因為很多 React Native 內(nèi)部腳本比如react-native upgrade或某些 Gradle 插件仍使用 Python 2 語法編寫。雖然社區(qū)正在遷移至 JS但短期內(nèi)無法完全替代。如果你裝了 Python 3 并命名為python系統(tǒng)就會調(diào)用錯誤版本導(dǎo)致報錯import is a reserved keyword (some-script.py, line X)這是典型的 Python 2/3 語法沖突。如何安全安裝 Python 2.7去官網(wǎng)下載 Python 2.7.18選擇Windows x86-64 MSI Installer安裝路徑建議設(shè)為C:Python27安裝完成后手動設(shè)置環(huán)境變量- 新建系統(tǒng)變量PYTHON_PATH C:Python27- 編輯PATH加入%PYTHON_PATH%然后驗證python --version輸出應(yīng)為Python 2.7.18 小技巧你可以保留 Python 3只要不把它注冊為默認(rèn)python命令即可。可以用py -2來顯式調(diào)用 Python 2。再來看 JDKJava 開發(fā)工具包Android 應(yīng)用本質(zhì)上是一個 Java/Kotlin 程序所以需要 JDK 提供編譯器javac、打包工具jarsigner等。推薦選擇哪個 JDK不要再用 Oracle JDK推薦使用開源發(fā)行版 Eclipse Temurin JDK 11 原 AdoptOpenJDK特點- 免費(fèi)商用- 社區(qū)維護(hù)穩(wěn)定- 支持 Windows x64安裝步驟下載安裝包.msi格式默認(rèn)安裝即可路徑通常為C:Program FilesEclipse Adoptiumjdk-11.x.x-hotspot設(shè)置環(huán)境變量- 新建系統(tǒng)變量JAVA_HOME C:Program FilesEclipse Adoptiumjdk-11.0.15.10-hotspot根據(jù)實際路徑調(diào)整- 修改PATH加入%JAVA_HOME%in驗證命令java -version javac -version正確輸出示例openjdk version 11.0.15 2022-04-19 OpenJDK Runtime Environment Temurin-11.0.1510 (build 11.0.1510) OpenJDK 64-Bit Server VM Temurin-11.0.1510 (build 11.0.1510, mixed mode) javac 11.0.15?? 注意事項- 如果你電腦上有多個 JDK如 IDEA 自帶的請確保JAVA_HOME指向的是你手動安裝的那個。- Windows Defender 有時會阻止 Gradle 下載依賴建議臨時關(guān)閉防火墻或添加白名單。?熱詞匹配點“Could not find tools.jar”、“python is not recognized” 這些經(jīng)典錯誤基本都源于這一步配置不當(dāng)。第三步Android Studio 與 SDK 配置 —— 最關(guān)鍵的一環(huán)現(xiàn)在輪到真正的“安卓構(gòu)建大腦”登場Android Studio。即使你不打算用它的 IDE 功能也需要它提供的SDK、Build Tools、Emulator 和 Gradle Wrapper。下載與安裝訪問 https://developer.android.com/studio下載 Android Studio推薦 Bundle 版含 SDK安裝時務(wù)必勾選以下組件- ? Android SDK- ? Android SDK Platform- ? Performance (Intel ? HAXM) —— CPU 支持 VT-x 才能啟用加速- ? Android Virtual Device安裝完成后啟動一次 Android Studio進(jìn)入歡迎界面 → Configure → SDK Manager。SDK 配置要點1. 安裝目標(biāo) API Level前往SDK Platforms選項卡至少安裝一個較新的 Android 版本推薦Android 13.0 (API 33)或Android 12L (API 32) 注意React Native 新項目通常要求最低 API 28Android 9但建議用新版本避免兼容性問題。2. 安裝構(gòu)建工具SDK Tools切換到SDK Tools選項卡勾選? Android SDK Build-Tools? Android SDK Platform-Tools包含 adb? Android SDK Tools (Obsolete) —— 某些老腳本仍依賴此組件? NDK可選僅用于開發(fā) C 原生模塊點擊 Apply 開始下載。環(huán)境變量設(shè)置重中之重這是很多人失敗的根本原因ANDROID_HOME 沒配對。默認(rèn) SDK 路徑是C:Users你的用戶名AppDataLocalAndroidSdk你需要設(shè)置兩個東西1. 系統(tǒng)變量新建ANDROID_HOME C:UsersYourNameAppDataLocalAndroidSdk2. 添加到 PATH將以下路徑全部加入系統(tǒng)PATH%ANDROID_HOME%platform-tools← 包含adb%ANDROID_HOME% ools%ANDROID_HOME% oolsin%ANDROID_HOME%emulator保存后重啟終端。驗證 ADB 是否正常工作打開 CMD運(yùn)行adb devices如果是首次運(yùn)行會提示你授權(quán) USB 調(diào)試連接真機(jī)時。若無設(shè)備連接輸出應(yīng)為List of devices attached表示 ADB 正常啟動。?熱詞匹配點能否順利執(zhí)行run-android完全取決于這一步是否成功?！癝DK location not found” 錯誤幾乎全是環(huán)境變量惹的禍。第四步創(chuàng)建并運(yùn)行你的第一個 React Native 項目終于到了激動人心的時刻我們使用官方推薦的 CLI 方式初始化項目npx react-native init FirstRNApp cd FirstRNApp npx react-native run-android讓我們拆解每一步發(fā)生了什么1.npx react-native init下載最新模板含 iOS Android 工程結(jié)構(gòu)自動生成android/目錄下的 Gradle 配置安裝react,react-native等核心依賴耗時較長耐心等待。2.npx react-native run-android這個命令觸發(fā)了一系列動作檢查JAVA_HOME,ANDROID_HOME,python等環(huán)境啟動 Metro 打包服務(wù)監(jiān)聽 8081 端口調(diào)用android/gradlew.bat編譯 debug APK使用adb install安裝到已連接設(shè)備啟動應(yīng)用并建立 WebSocket 連接加載 JS bundle如果一切順利你會在模擬器或手機(jī)上看到熟悉的歡迎界面“Welcome to React Native!”“You can start editing this app with any text editor…”恭喜你react native搭建環(huán)境成功了常見問題及解決方案實戰(zhàn)經(jīng)驗總結(jié)? 問題1SDK location not found原因ANDROID_HOME環(huán)境變量未設(shè)置或路徑錯誤。解決方法- 檢查變量名是否拼寫正確注意大小寫- 檢查路徑是否存在可用dir %ANDROID_HOME%查看- 重啟命令行窗口使變量生效? 問題2Unable to load script from assets index.android.bundle現(xiàn)象白屏、紅屏報錯提示找不到 JS bundle。常見原因- Metro 服務(wù)未啟動- 設(shè)備與電腦不在同一網(wǎng)絡(luò)真機(jī)調(diào)試時- USB 調(diào)試未開啟文件傳輸模式解決方法- 確保 Metro 正在運(yùn)行端口 8081- 在設(shè)備上搖晃喚出開發(fā)者菜單 → Reload JS- 或執(zhí)行npx react-native start --reset-cache? 問題3Gradle 下載極慢甚至超時國內(nèi)訪問services.gradle.org和jcenter.bintray.com極不穩(wěn)定。優(yōu)化方案替換為國內(nèi)鏡像源1. 修改 Gradle 分發(fā)地址編輯文件android/gradle/wrapper/gradle-wrapper.properties原內(nèi)容distributionUrlhttps://services.gradle.org/distributions/gradle-7.5.1-bin.zip改為騰訊云鏡像distributionUrlhttps://mirrors.cloud.tencent.com/gradle/gradle-7.5.1-bin.zip2. 替換 Maven 倉庫源編輯android/build.gradle在repositories中優(yōu)先使用阿里云allprojects { repositories { maven { url https://maven.aliyun.com/repository/google } maven { url https://maven.aliyun.com/repository/jcenter } mavenCentral() google() } }保存后執(zhí)行cd android ./gradlew clean再重新運(yùn)行項目速度提升明顯。實用技巧與最佳實踐? 使用 Yarn 提升依賴管理效率相比 npmYarn 安裝更快、鎖文件更可靠npm install -g yarn yarn install之后可用yarn android替代npx react-native run-android? 清理緩存三連擊當(dāng)遇到奇怪問題時試試這套組合拳# 重置 Metro 緩存 npx react-native start --reset-cache # 清理 Gradle 構(gòu)建緩存 cd android ./gradlew clean # 清除 npm/yarn 緩存可選 npm cache clean --force # 或 yarn cache clean? 推薦開發(fā)工具組合編輯器VS Code React Native Tools 插件模擬器Pixel 4 API 30x86_64 HAXM 加速調(diào)試Chrome DevToolsF12 打開或 Flipper總結(jié)你現(xiàn)在擁有了什么通過這篇文章你應(yīng)該已經(jīng)完成了一個完整、可工作的 React Native 開發(fā)環(huán)境包括? Node.js v18 環(huán)境? Python 2.7 與 JDK 11 正確配置? Android SDK 全套組件安裝到位? 成功運(yùn)行首個 React Native 項目? 掌握常見問題排查思路更重要的是你不再只是“按步驟操作”而是理解了每個組件的作用工具角色Node.js運(yùn)行 JS、啟動 MetroPython執(zhí)行構(gòu)建腳本JDK編譯 Java 代碼Android SDK提供構(gòu)建工具與模擬器Gradle自動化構(gòu)建調(diào)度器ADB設(shè)備通信橋梁下一步你可以做什么學(xué)習(xí)使用useState,View,Text,Image構(gòu)建 UI嘗試接入攝像頭、GPS 等原生功能集成第三方庫如react-navigation、axios探索如何打包 release 版 APK而這一切的基礎(chǔ)都始于你剛剛親手搭建的這個環(huán)境。如果你在過程中遇到了其他問題歡迎留言交流。畢竟每個成功的開發(fā)者都是從一次次“環(huán)境配不通”中走出來的。Keep coding.