Expo CLI 實(shí)戰(zhàn)五條命令跑通 React Native 跨平臺開發(fā)【免費(fèi)下載鏈接】expoAn open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ex/expo新建的項(xiàng)目里敲下npx expo start終端跳出一個(gè)二維碼你卻不知道下一步按什么鍵、開哪個(gè)頁面——這就是 Expo CLIExpo 框架的命令行界面里最常見的卡點(diǎn)。它是整套 React Native 開發(fā)流程的入口裝依賴、起開發(fā)服務(wù)器、跑真機(jī)、生成原生工程基本不用離開終端。 裝之前先體檢兩條命令確認(rèn)環(huán)境沒問題這節(jié)解決為什么我的環(huán)境跑不起來。別急著建項(xiàng)目先確認(rèn) Node 版本達(dá)標(biāo)當(dāng)前版本 CLI 要求 Node 22.13 及以上再用 doctor 掃一遍依賴配置npx expo-doctor這條命令會(huì)逐項(xiàng)檢查項(xiàng)目配置、依賴版本和工作目錄狀態(tài)有問題會(huì)在輸出里逐條列出沒有則打印All checks passed。注意老版 CLI 里的expo doctor已從本地命令遷移為獨(dú)立的expo-doctor包直接敲舊命令只會(huì)看到一條遷移提示。Expo CLI 本身建議用npx expo按需調(diào)用不必全局安裝避免不同項(xiàng)目踩到版本漂移。 第一次跑起來3 條命令從空項(xiàng)目到手機(jī)屏幕這節(jié)解決最小路徑問題建項(xiàng)目、起服務(wù)、上設(shè)備全程不超過 3 條命令。npx create-expo-app my-app它會(huì)交互式讓你選模板默認(rèn)、TypeScript、Tab 導(dǎo)航等完成后當(dāng)前目錄多出一個(gè)my-app。cd my-app npx expo start終端會(huì)打印局域網(wǎng)地址和一個(gè)二維碼用 Expo Go 掃碼即可在真機(jī)上跑起來本地代碼一有改動(dòng)App 會(huì)自動(dòng)熱重載。服務(wù)跑起來后終端底部會(huì)提示一組快捷鍵r重載 Appa裝到 Android 模擬器/設(shè)備i裝到 iOS 模擬器w同時(shí)起 Web 端d打開開發(fā)者菜單想直接在瀏覽器里驗(yàn)證 UI加一個(gè)參數(shù)即可npx expo start --web跑通后瀏覽器會(huì)打開本地服務(wù)頁面看到 Expo 的歡迎頁就說明 React Native 開發(fā)服務(wù)器已正常工作 日常開發(fā)循環(huán)一天里真正會(huì)敲的命令這節(jié)按一天的節(jié)奏串命令而不是逐條羅列。早上接手項(xiàng)目裝個(gè)相機(jī)和定位庫用install而不是npm i它會(huì)按當(dāng)前 SDK 自動(dòng)挑兼容版本省掉查版本的功夫npx expo install expo-camera expo-location輸出會(huì)顯示每個(gè)包匹配到的具體版本號裝完package.json已同步更新。下午改完代碼想驗(yàn)真機(jī)效果run系列命令會(huì)直接編譯原生代碼并推送到設(shè)備比模擬器啟動(dòng)快很多npx expo run:android npx expo run:iosAndroid 端會(huì)走 Gradle 構(gòu)建后安裝iOS 端會(huì)走 Xcode 編譯后啟動(dòng)首次較慢、后續(xù)增量構(gòu)建很快。中途發(fā)現(xiàn)配置不對比如 scheme、權(quán)限聲明丟了不用猜直接打印合并后的生效配置npx expo config輸出是一整段 JSON即app.json與所有插件疊加后的最終結(jié)果排查我以為我配了但沒生效的問題看它就行。要發(fā)版前出包用export生成優(yōu)化后的 JavaScript 包加-p指定平臺平臺參數(shù)細(xì)節(jié)以npx expo export --help輸出為準(zhǔn)npx expo export -p android完成后項(xiàng)目下會(huì)多出一個(gè)dist目錄里面是壓過、可分發(fā)的靜態(tài)資源。? 要碰原生代碼時(shí)prebuild 生成原生工程 插件改配置這節(jié)解決必須動(dòng)原生但不想手寫整個(gè)工程的問題。prebuild會(huì)根據(jù)配置重新生成完整的android和ios目錄之后你在這個(gè)目錄里改代碼、再跑run:android/run:ios原生工程從此可版本化維護(hù)npx expo prebuild --platform android只加--platform可以只生成單端不加則兩端都生成。如果只是想改權(quán)限文案、App 圖標(biāo)這類配置不必進(jìn)原生目錄在app.json里加一段插件配置再重新 prebuild 即可{ expo: { plugins: [ [expo-camera, { cameraPermission: 允許應(yīng)用訪問相機(jī)拍照 }] ] } }改完重跑一次npx expo prebuild新配置就會(huì)落到原生工程里。排錯(cuò)不用單獨(dú)記章節(jié)遇到下表里的癥狀直接對號入座癥狀命令說明8081 端口被占start 起不來npx expo start --port 19001換個(gè)端口參數(shù)細(xì)節(jié)以--help為準(zhǔn)依賴版本與 SDK 不匹配npx expo install 包名自動(dòng)對齊當(dāng)前 SDK 的兼容版本構(gòu)建報(bào)錯(cuò)找不到原因npx expo-doctor逐項(xiàng)輸出環(huán)境檢查與修復(fù)建議某條命令的參數(shù)記不清npx expo 命令 --help以本機(jī)版本的 help 輸出為準(zhǔn)Expo CLI 把 React Native 跨平臺開發(fā)里最瑣碎的環(huán)節(jié)收進(jìn)了終端命令雖多真正常用的就是這一小撮。想深入某個(gè)環(huán)節(jié)可以順手翻一下官方文檔docs/pages/eas/命令實(shí)現(xiàn)細(xì)節(jié)則在 packages/expo/cli/ 里?！久赓M(fèi)下載鏈接】expoAn open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/ex/expo創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考