ReactNative環(huán)境搭建的教程
注意 Node 的版本應(yīng)大于等于 16,安裝完 Node 后建議設(shè)置 npm 鏡像(淘寶源)以加速后面的過程(或使用科學(xué)上網(wǎng)工具)。
前言
如果你之前沒有接觸過 Android 的開發(fā)環(huán)境,那么請做好心理準(zhǔn)備,這一過程相當(dāng)繁瑣。請萬分仔細地閱讀下面的說明,嚴(yán)格對照文檔進行配置操作。
譯注:請注意?。?!國內(nèi)用戶必須必須必須有穩(wěn)定的代理軟件,否則在下載、安裝、配置過程中會不斷遭遇鏈接超時或斷開,無法進行開發(fā)工作。某些代理軟件可能只提供瀏覽器的代理功能,或只針對特定網(wǎng)站代理等等,請自行研究配置或更換其他軟件??傊绻麍箦e中出現(xiàn)有網(wǎng)址,那就是因為鏈接源倉庫的網(wǎng)絡(luò)鏈接被阻斷了,這一阻斷現(xiàn)象可能因時間、地區(qū)、運營商而不同。
一、環(huán)境搭建
低于 0.73 版本的 React Native 需要 JDK 11 版本,而低于 0.67 的需要 JDK 8 版本。
- 注意:強烈建議始終選擇 Node 當(dāng)前的 LTS (長期維護)版本,一般是偶數(shù)版本,不要選擇偏實驗性質(zhì)的奇數(shù)版本。
- 注意:不要使用 cnpm!cnpm 安裝的模塊路徑比較奇怪,packager 不能正常識別!
二、使用步驟
1.安裝jdk
因為我這里用的是0.68版本所以使用JDK 11 去官網(wǎng)下載JDK11 Temurin或Oracle JDK上下載(后者下載需注冊登錄)


java JDK安裝成功
2.安裝Android Studio
鏈接:下載 Android Studio 和應(yīng)用工具 - Android 開發(fā)者 | Android Developers 這個鏈接去下載



點擊下一步next
安裝界面中選擇"Custom"選項,確保選中了以下幾項:
- Android SDK
- Android SDK Platform
- Android Virtual Device
然后點擊"Next"來安裝選中的組件。



然后點擊這里的More Actions
找到SDK Manager。點擊"Configure",然后就能看到"SDK Manager"
SDK Manager 還可以在 Android Studio 的"Preferences"菜單中找到。具體路徑是Appearance & Behavior → System Settings → Android SDK。

把紅箭頭標(biāo)注的東西都選擇好
然后點擊SDK Tools選項卡

還沒完,在"SDK Tools"選項卡,點擊"NDK (Side by side)",同樣勾中右下角的"Show Package Details",選擇20.1.5948944版

以上步驟都選好之后,點擊右下角的Apply進行安裝
3. 配置 ANDROID_HOME 環(huán)境變量
React Native 需要通過環(huán)境變量來了解你的 Android SDK 裝在什么路徑,從而正常進行編譯。
打開控制面板 -> 系統(tǒng)和安全 -> 系統(tǒng) -> 高級系統(tǒng)設(shè)置 -> 高級 -> 環(huán)境變量 -> 新建,創(chuàng)建一個名為ANDROID_HOME的環(huán)境變量,它指向的是你的 Android SDK 所在的目錄,具體的路徑可能和下圖不一致,請自行確認

然后在Path配置

點開編輯后

創(chuàng)建新項目
如果你之前全局安裝過舊的react-native-cli命令行工具,請使用npm uninstall -g react-native-cli卸載掉它以避免一些沖突。
使用 React Native 內(nèi)建的命令行工具來創(chuàng)建一個名為"AwesomeProject"的新項目。這個命令行工具不需要安裝,可以直接用 node 自帶的npx命令來使用:
npx react-native init AwesomeProject
[可選參數(shù)] 指定版本或項目模板
你可以使用--version參數(shù)(注意是兩個杠)創(chuàng)建指定版本的項目。例如:
npx react-native init AwesomeProject --version X.XX.X
還可以使用--template來使用一些社區(qū)提供的模板,例如帶有TypeScript配置的:
npx react-native init AwesomeTSProject --template react-native-template-typescript
下載模擬器

默認安裝在c盤可能模擬器運行不起來因為有中文路徑
可以自己手動配置變量安裝在別的路徑

總結(jié)
React Native 是一個由 Facebook 開發(fā)的開源框架,用于構(gòu)建跨平臺移動應(yīng)用程序。它允許開發(fā)人員使用 JavaScript 和 React 來編寫移動應(yīng)用,同時生成真正的原生應(yīng)用。
這意味著可以使用相同的代碼庫構(gòu)建 iOS 和 Android 應(yīng)用,從而提高開發(fā)效率和代碼復(fù)用性。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
React?Router?v6路由懶加載的2種方式小結(jié)
React?Router?v6?的路由懶加載有2種實現(xiàn)方式,1是使用react-router自帶的?route.lazy,2是使用React自帶的?React.lazy,下面我們就來看看它們的具體實現(xiàn)方法吧2024-04-04
react-pdf實現(xiàn)將pdf文件轉(zhuǎn)為圖片,用于頁面展示
這篇文章主要介紹了react-pdf實現(xiàn)將pdf文件轉(zhuǎn)為圖片,用于頁面展示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
react以create-react-app為基礎(chǔ)創(chuàng)建項目
這篇文章主要介紹了react以create-react-app為基礎(chǔ)創(chuàng)建項目,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
react如何實現(xiàn)側(cè)邊欄聯(lián)動頭部導(dǎo)航欄效果
這篇文章主要介紹了react如何實現(xiàn)側(cè)邊欄聯(lián)動頭部導(dǎo)航欄效果,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03

