快捷導(dǎo)航

ReactNative環(huán)境搭建的教程

更新時(shí)間：2025年04月21日 09:28:14 作者：今天不吃土豆

這篇文章主要介紹了ReactNative環(huán)境搭建的教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

前言

如果你之前沒有接觸過(guò) Android 的開發(fā)環(huán)境，那么請(qǐng)做好心理準(zhǔn)備，這一過(guò)程相當(dāng)繁瑣。請(qǐng)萬(wàn)分仔細(xì)地閱讀下面的說(shuō)明，嚴(yán)格對(duì)照文檔進(jìn)行配置操作。

譯注：請(qǐng)注意?。。?guó)內(nèi)用戶必須必須必須有穩(wěn)定的代理軟件，否則在下載、安裝、配置過(guò)程中會(huì)不斷遭遇鏈接超時(shí)或斷開，無(wú)法進(jìn)行開發(fā)工作。某些代理軟件可能只提供瀏覽器的代理功能，或只針對(duì)特定網(wǎng)站代理等等，請(qǐng)自行研究配置或更換其他軟件?？傊绻麍?bào)錯(cuò)中出現(xiàn)有網(wǎng)址，那就是因?yàn)殒溄釉磦}(cāng)庫(kù)的網(wǎng)絡(luò)鏈接被阻斷了，這一阻斷現(xiàn)象可能因時(shí)間、地區(qū)、運(yùn)營(yíng)商而不同。

一、環(huán)境搭建

低于 0.73 版本的 React Native 需要 JDK 11 版本，而低于 0.67 的需要 JDK 8 版本。

注意：強(qiáng)烈建議始終選擇 Node 當(dāng)前的 LTS （長(zhǎng)期維護(hù)）版本，一般是偶數(shù)版本，不要選擇偏實(shí)驗(yàn)性質(zhì)的奇數(shù)版本。
注意：不要使用 cnpm！cnpm 安裝的模塊路徑比較奇怪，packager 不能正常識(shí)別！

二、使用步驟

1.安裝jdk

因?yàn)槲疫@里用的是0.68版本所以使用JDK 11 去官網(wǎng)下載JDK11 Temurin或Oracle JDK上下載(后者下載需注冊(cè)登錄)

java JDK安裝成功

2.安裝Android Studio

鏈接：下載 Android Studio 和應(yīng)用工具 - Android 開發(fā)者 | Android Developers 這個(gè)鏈接去下載

點(diǎn)擊下一步next

安裝界面中選擇"Custom"選項(xiàng)，確保選中了以下幾項(xiàng)：

Android SDK
Android SDK Platform
Android Virtual Device

然后點(diǎn)擊"Next"來(lái)安裝選中的組件。

然后點(diǎn)擊這里的More Actions

找到SDK Manager。點(diǎn)擊"Configure"，然后就能看到"SDK Manager"

SDK Manager 還可以在 Android Studio 的"Preferences"菜單中找到。具體路徑是Appearance & Behavior → System Settings → Android SDK。

把紅箭頭標(biāo)注的東西都選擇好

然后點(diǎn)擊SDK Tools選項(xiàng)卡

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

以上步驟都選好之后,點(diǎn)擊右下角的Apply進(jìn)行安裝

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

React Native 需要通過(guò)環(huán)境變量來(lái)了解你的 Android SDK 裝在什么路徑，從而正常進(jìn)行編譯。

打開控制面板 -> 系統(tǒng)和安全 -> 系統(tǒng) -> 高級(jí)系統(tǒng)設(shè)置 -> 高級(jí) -> 環(huán)境變量 -> 新建，創(chuàng)建一個(gè)名為ANDROID_HOME的環(huán)境變量，它指向的是你的 Android SDK 所在的目錄，具體的路徑可能和下圖不一致，請(qǐng)自行確認(rèn)

然后在Path配置

點(diǎn)開編輯后

創(chuàng)建新項(xiàng)目

如果你之前全局安裝過(guò)舊的react-native-cli命令行工具，請(qǐng)使用npm uninstall -g react-native-cli卸載掉它以避免一些沖突。

使用 React Native 內(nèi)建的命令行工具來(lái)創(chuàng)建一個(gè)名為"AwesomeProject"的新項(xiàng)目。這個(gè)命令行工具不需要安裝，可以直接用 node 自帶的npx命令來(lái)使用：

npx react-native init AwesomeProject

[可選參數(shù)] 指定版本或項(xiàng)目模板

你可以使用--version參數(shù)（注意是兩個(gè)杠）創(chuàng)建指定版本的項(xiàng)目。例如：

npx react-native init AwesomeProject --version X.XX.X

還可以使用--template來(lái)使用一些社區(qū)提供的模板，例如帶有TypeScript配置的：

npx react-native init AwesomeTSProject --template react-native-template-typescript

下載模擬器

默認(rèn)安裝在c盤可能模擬器運(yùn)行不起來(lái)因?yàn)橛兄形穆窂?/p>

可以自己手動(dòng)配置變量安裝在別的路徑

總結(jié)

React Native 是一個(gè)由 Facebook 開發(fā)的開源框架，用于構(gòu)建跨平臺(tái)移動(dòng)應(yīng)用程序。它允許開發(fā)人員使用 JavaScript 和 React 來(lái)編寫移動(dòng)應(yīng)用，同時(shí)生成真正的原生應(yīng)用。

這意味著可以使用相同的代碼庫(kù)構(gòu)建 iOS 和 Android 應(yīng)用，從而提高開發(fā)效率和代碼復(fù)用性。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: