React Native環境配置完整版（超詳細）

目錄

第一步：打開React Native官方網站

第二步：安裝NVM與Node.js

一、安裝NVM

二、使用NVM安裝Node.js

三、NVM使用說明

四、環境變量配置

第三步：安裝JDK

一、JDK介紹

二、下載與安裝JDK

三、環境配置

四、驗證是否配置成功

第四步：安裝Android Studio

一、基礎安裝

二、環境配置

第五步：React Native

一、Yarn

二、創建新項目?

三、準備 Android 設備?

四、編譯并運行 React Native 應用?

五、修改項目?

第一步：打開React Native官方網站

第二步：安裝NVM與Node.js

????????為方便不同項目所需Node.js版本不同，降低后續項目要給Node.js降級的麻煩，先安裝NVM管理Node.js，NVM可以很方便的切換版本。

一、安裝NVM

????????1.下載NVM包：Releases · coreybutler/nvm-windows · GitHub；找到V1.1.11版本

? ? ? ? 2.在D盤（盡量不要在C盤）創建一個文件夾命名為NVM，點擊下載好的nvm-setup.exe，將其下載在剛才建立的NVM文件夾中

????????然后直接點擊install即可

? ? ? ? 3.安裝完nvm后先不要著急安裝node版本。
????????????????(1) 找到NVM安裝路徑
????????????????(2) 找到?setting.txt?文件

?????????????????(3) 新增兩行信息，配置下載源，將下述兩行下載鏡像新增在setting.txt文件中并保存

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

? ? ? ? 4.檢查nvm是否安裝完成；
???????????win + R，調用cmd，輸入nvm，出現下面這一堆就表示安裝成功了。

二、使用NVM安裝Node.js

? ? ? ? 1.首先，win + R，調用cmd，輸入“nvm list available”，查詢可插入版本號，LST表示可插入穩定版本。【如未指定版本，建議安裝LTS下的版本】

? ? ? ? 2.安裝指定node.js版本，必須在14以上，輸入“nvm install 16.14.0”

? ? ? ? 3.輸入“nvm use 16.17.0”，切換Node.js版本
? ? ? ? 4.安裝完成后可以分別輸入命令行 “node -v”?和“npm -v”，用以檢驗node.js以及對應npm是否安裝成功

三、NVM使用說明

? ? ? ? 1.安裝指定node.js版本：
nvm install <指定Node.js版本號>
? ? ? ? 2.刪除指定node.js版本：
nvm uninstall <指定Node.js版本號>
? ? ? ? 3.查看當前已安裝的node.js版本，帶*號的是正在使用的：
nvm list
或者
nvm ls

四、環境變量配置

在進行環境配置之前，設置文件權限，避免之后報錯。右鍵D盤Program Files文件下的nodejs文件，屬性-安全-編輯-允許-應用-確定

? ? ? ? ?1.創建兩個文件夾，分別命名為“node_cache”、“node_global”，用以保存從鏡像源安裝的東西
? ? ? ? 2.在cmd中分別輸入如下兩行代碼，無任何響應，即為執行成功
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

????????3.設置環境變量：
????????????????(1) 右鍵此電腦–屬性–高級系統設置–高級–環境變量–系統變量，添加變量名為：NODE_PATH,變量值為npm安裝路徑：D:\Program Files\nodejs\node_modules
????????????????(2) 編輯用戶變量的 path，將默認的 C 盤下的 C:\Users\用戶名\AppData\Roaming\npm?修改為 D:\Program Files\nodejs\node_global

? ? ? ? ? ? ? ? (3) 在【系統變量】中選擇【Path】點擊【編輯】添加【NODE_PATH】，隨后一直點擊【確定】

? ? ? ? ? ? ? ? （4）驗證環境配置是否成功。在命令提示符中輸入如下代碼：

npm install express -g   // -g代表全局安裝

如果，出現類似下圖中的情況，即為配置成功

援引的別人的圖，做到這一步忘記截圖了@WHF__

如果，出現類似如下的圖，也證明配置成功了。顯示“changed 69 packages, and audited”表明npm已經全局安裝了Express，并且還對安裝的包進行了安全審計。

命令執行完畢后，npm會輸出一個總結，其中包括一些關于審計結果的信息。你可以查看這些信息以了解是否有任何高風險的安全問題被發現。

可以通過查看輸出中的found 0 vulnerabilities來確定是否所有依賴項都是安全的。

至此，NVM和Node.js配置完成

?如果大家nvm切換node版本時，顯示切換成功，實際沒有切換成功，大家可以參考下面這篇文章改正！解決nvm切換node版本失敗的終極辦法，親測有效！_node切換不成功怎么辦-CSDN博客

第三步：安裝JDK

一、JDK介紹

較常用的四個JDK版本

????????????????1. JDK8（=Java8=JDK1.8），這個版本較為成熟穩定，是JDK的一個重要長期支持版本(LTS)，在生產環境中使用非常廣泛；

????????????????2. JDK11，增加了大量實用的新特性，包括新的 ZGC、云計算監控診斷、Http Client、支持Unicode 10.0.0等，一共包含 17 個 JDK 增強提案；

????????????????3. JDK17，最新長期支持版本， 具有switch 新增模式，增加 Realed class 密封類，Parallel GC 默認啟用已經浮點運算更加嚴格；

????????????????4. JDK18，短期版本，增加了服務提供者接口，默認字符集為UTF-8；

（建議下載JDK17一下的版本）

二、下載與安裝JDK

? ? ? ? ? ? ? ? 1. 進入Oracle官網下載頁面：Java Downloads | Oracle

? ? ? ? ? ? ? ? 2. 這里我選擇下載Java17，頁面往下滑動找到Java17

? ? ? ? ? ? ? ? 3. 下面開始安裝JDK，切記路徑上不要有中文！！！雙擊下載好的.exe文件
? ? ? ? ? ? ? ? 4. 路徑設置為D盤，在D盤下創建一個Java文件夾，將JDK安裝在此文件夾下，路徑可以設置成如下：

然后點擊下一步，下載完成即可

三、環境配置

? ? ? ? ? ? ? ? 1. 右鍵點擊【我的電腦】>【屬性】>【高級系統設置】>【環境變量】

? ? ? ? ? ? ? ? 2. 在系統變量下面新增一個變量，變量名是JAVA_HOME，變量值為D:\Java\JDK

????????????????3. 新增加一個CLASSPATH變量屬性，繼續點新增，然后添加如下代碼
.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

? ? ? ? ? ? ? ? 4.找到系統變量中的Path變量，雙擊進入，點擊新建，輸入如下一行代碼，然后全部點擊確認，環境變量配置完成。

%JAVA_HOME%\bin

四、驗證是否配置成功

? ? ? ? 按下window鍵+R，在運行欄中輸入cmd，在命令窗口中輸入java -version，出現如下內容，即為安裝成功。

至此JDK安裝成功

第四步：安裝Android Studio

一、基礎安裝

? ? ? ? 1.安裝及基礎配置

大家可以跟著這個博主進行安裝，我初次安裝Android Studio就是跟著這個博主進行的，內容十分詳細，只要一步一步跟著來，Android Studio安裝肯定成功。該博主在安裝SDK的時候沒有改SDK安裝位置的操作，大家在下載SDK前記得自行更改SDK下載地址到部署之前建立的SDK文件夾。

Android Studio 卸載 / 安裝細節問題參考_android studio卸載-CSDN博客

? ? ? ? 2.React Native所需的SDK配置
在SDK Platforms一欄下勾選下列三個選項，然后apply

在SDK Tools一欄下，勾選如下兩個選項，然后apply，然后點ok完成SDK配置

二、環境配置

????????React Native 需要通過環境變量來了解你的 Android SDK 裝在什么路徑，從而正常進行編譯。

? ? ? ? 1.和上面一樣的操作，打開環境變量。創建一個名為ANDROID_HOME的環境變量，路徑如果和我設置的一樣就是D:\AndroidStudio\SDK，以個人Android SDK Location為準。

? ? ? ? 2.把下列工具目錄添加到用戶變量Path中

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

至此，整個React Native環境以及相關依賴搭建完成，下面嘗試創建項目。

第五步：React Native

一、Yarn

? ? ? ? Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模塊的下載。

? ? ? ? 在終端命令行輸入"npm install -g yarn"，出現如下內容，即為安裝成功。

（項目創建運行部分從React Native處提取，方便大家一次性嘗試）

二、創建新項目?

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

npm uninstall -g react-native-cli @react-native-community/cli

使用 React Native 內建的命令行工具來創建一個名為"AwesomeProject"的新項目。這個命令行工具不需要安裝，可以直接用 node 自帶的npx命令來使用：

必須要看的注意事項一：請不要在目錄、文件名中使用中文、空格等特殊符號。請不要單獨使用常見的關鍵字作為項目名（如 class, native, new, package 等等）。請不要使用與核心模塊同名的項目名（如 react, react-native 等）。

必須要看的注意事項二：請不要在某些權限敏感的目錄例如 System32 目錄中 init 項目！會有各種權限限制導致不能運行！

必須要看的注意事項三：請不要使用一些移植的終端環境，例如git bash或mingw等等，這些在 windows 下可能導致找不到環境變量。請使用系統自帶的命令行（CMD 或 powershell）運行。

????????[可選參數] 指定版本或項目模板?

????????你可以使用--version參數（注意是兩個杠）創建指定版本的項目。注意版本號必須精確到兩個小數點。

npx @react-native-community/cli init AwesomeProject --version X.XX.X

????????還可以使用--template來使用一些社區提供的模板。

三、準備 Android 設備?

你需要準備一臺 Android 設備來運行 React Native Android 應用。這里所指的設備既可以是真機，也可以是模擬器。后面我們所有的文檔除非特別說明，并不區分真機或者模擬器。Android 官方提供了名為 Android Virtual Device（簡稱 AVD）的模擬器。此外還有很多第三方提供的模擬器如Genymotion、BlueStack 等。一般來說官方模擬器免費、功能完整，但性能較差。第三方模擬器性能較好，但可能需要付費，或帶有廣告。

????????1. 使用 Android 真機?

你也可以使用 Android 真機來代替模擬器進行開發，只需用 usb 數據線連接到電腦，然后遵照在設備上運行這篇文檔的說明操作即可。

????????2. 使用 Android 模擬器?

你可以使用 Android Studio 打開項目下的"android"目錄，然后可以使用"AVD Manager"來查看可用的虛擬設備，它的圖標看起來像下面這樣：

如果你剛剛才安裝 Android Studio，那么可能需要先創建一個虛擬設備。點擊"Create Virtual Device..."，然后選擇所需的設備類型并點擊"Next"，然后選擇Tiramisu?API Level 33 image.

譯注：請不要輕易點擊 Android Studio 中可能彈出的建議更新項目中某依賴項的建議，否則可能導致無法運行。

四、編譯并運行 React Native 應用?

確保你先運行了模擬器或者連接了真機，然后在你的項目目錄中運行yarn android或者yarn react-native run-android：

cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

此命令會對項目的原生部分進行編譯，同時在另外一個命令行中啟動Metro服務對 js 代碼進行實時打包處理（類似 webpack）。Metro服務也可以使用yarn start命令單獨啟動。

如果配置沒有問題，你應該可以看到應用自動安裝到設備上并開始運行。注意第一次運行時需要下載大量編譯依賴，耗時可能數十分鐘。此過程嚴重依賴穩定的代理軟件，否則將頻繁遭遇鏈接超時和斷開，導致無法運行。

npx react-native run-android只是運行應用的方式之一。你也可以在 Android Studio 中直接運行應用。

譯注：建議在run-android成功后再嘗試使用 Android Studio 啟動。請不要輕易點擊 Android Studio 中可能彈出的建議更新項目中某依賴項的建議，否則可能導致無法運行。

如果你無法正常運行，遇到奇奇怪怪的紅屏錯誤，先回頭仔細對照文檔檢查，然后可以看看問題討論區。不同時期不同版本可能會碰到不同的問題，我們會在論壇中及時解答更新。但請注意千萬不要執行 bundle 命令，那樣會導致代碼完全無法刷新。

五、修改項目?

現在你已經成功運行了項目，我們可以開始嘗試動手改一改了：

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

????????至此，整個React Native環境搭建完成，可以嘗試創建自己的項目了！

? ? ? ? 感謝大家的支持！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/916807.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/916807.shtml
英文地址，請注明出處：http://en.pswp.cn/news/916807.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Rust 最短路徑、Tide、Partial、Yew、Leptos、數獨實踐案例

Rust 最短路徑、Tide、Partial、Yew、Leptos、數獨實踐案例

基于Rust的Meta和pyrefly相關實例 以下是一些基于Rust的Meta和pyrefly相關實例的示例代碼和用法。這些示例涵蓋了常見的使用場景，包括元編程、代碼生成、Python交互等。 基本元編程示例 使用Rust的宏和元編程功能生成代碼。 macro_rules! greet {($name:expr) => {prin…
閱讀更多...
Microsoft-DNN NTLM暴露漏洞復現（CVE-2025-52488）

Microsoft-DNN NTLM暴露漏洞復現（CVE-2025-52488）

免責申明： 本文所描述的漏洞及其復現步驟僅供網絡安全研究與教育目的使用。任何人不得將本文提供的信息用于非法目的或未經授權的系統測試。作者不對任何由于使用本文信息而導致的直接或間接損害承擔責任。如涉及侵權，請及時與我們聯系，我們將盡快處理并刪除相關內容。 前…
閱讀更多...
Windows上WSL2實例與宿主機橋接網絡實現局域網互通

Windows上WSL2實例與宿主機橋接網絡實現局域網互通

在 WSL 2 中&#xff0c;默認使用 NAT 網絡模式&#xff0c;這會導致 WSL 實例和宿主機所在的局域網無法直接互通。要讓 WSL 2 和宿主機所在的局域網互通&#xff0c;可以通過以下步驟配置 wsl.conf 并結合宿主機網絡設置&#xff0c;啟用 WSL 2 的橋接模式&#xff1a;修改 ws…
閱讀更多...
程序代碼篇---數據包解析

程序代碼篇---數據包解析

數據包解析是不同設備&#xff08;如電腦、ESP32 等嵌入式設備&#xff09;之間通信的核心環節。簡單說&#xff0c;就是把收到的 "一串數據" 翻譯成雙方都能理解的 "具體信息"&#xff08;比如溫度、濕度、命令等&#xff09;。下面介紹幾種常見的數據包格…
閱讀更多...
【開發雜談】用AI玩AI聊天游戲：使用 Electron 和 Python 開發大模型語音聊天軟件

【開發雜談】用AI玩AI聊天游戲：使用 Electron 和 Python 開發大模型語音聊天軟件

項目地址&#xff1a; GitHub | wfts-ai-chathttps://github.com/HiMeditator/wfts-ai-chat 前言 最近一個基于 AI 的聊天游戲 Whispers from the Stars&#xff08;群星低語&#xff09;的 Demo 版本發布了。《Whispers from the Star》是一款科幻主題互動游戲。背景設定在…
閱讀更多...
SQL優化系統解析

SQL優化系統解析

MySQL的安裝就不講述了, 本篇文章著重講解sql優化 本篇是對B站顏群老師視頻講解的筆記梳理, 感興趣的可以去看下老師的原視頻: SQL優化 MySQL原理 1. MySQL邏輯分層: 連接層->服務層->引擎層->存儲層(如圖) 連接層&#xff1a;提供與客戶端連接的服務服務層&#…
閱讀更多...
【機器學習案列-25】電信用戶流失預測：從數據處理到模型評估

【機器學習案列-25】電信用戶流失預測：從數據處理到模型評估

&#x1f9d1; 博主簡介&#xff1a;曾任某智慧城市類企業算法總監&#xff0c;目前在美國市場的物流公司從事高級算法工程師一職&#xff0c;深耕人工智能領域&#xff0c;精通python數據挖掘、可視化、機器學習等&#xff0c;發表過AI相關的專利并多次在AI類比賽中獲獎。CSDN…
閱讀更多...
【MATLAB代碼】灰色預測與多項式預測、指數平滑預測的對比，包含預處理、模型構建和和可視化輸出。模擬預測若干年的GDP，訂閱后可查看完整代碼，有中文注釋

【MATLAB代碼】灰色預測與多項式預測、指數平滑預測的對比，包含預處理、模型構建和和可視化輸出。模擬預測若干年的GDP，訂閱后可查看完整代碼，有中文注釋

代碼實現了灰色預測模型GM(1,1)在GDP預測中的應用，并結合線性回歸、二次多項式回歸和指數平滑模型進行對比分析。代碼包含數據預處理、模型構建、可視化輸出和誤差驗證四個核心模塊，實現了從數據輸入到預測結果展示的全流程。 文章目錄 運行結果 MATLAB源代碼 GM(1,1)模型數學…
閱讀更多...
搜索二維矩陣Ⅱ C++

搜索二維矩陣Ⅱ C++

編寫一個高效的算法來搜索 m x n 矩陣 matrix 中的一個目標值 target 。該矩陣具有以下特性&#xff1a; 每行的元素從左到右升序排列。 每列的元素從上到下升序排列。class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {i…
閱讀更多...
如何在 Apache Ignite 中創建和使用自定義 SQL 函數（Custom SQL Functions）

如何在 Apache Ignite 中創建和使用自定義 SQL 函數（Custom SQL Functions）

這段內容講的是 如何在 Apache Ignite 中創建和使用自定義 SQL 函數&#xff08;Custom SQL Functions&#xff09;。我們可以分步驟來理解它的含義和用法。&#x1f4da; 一、什么是 Custom SQL Function&#xff1f; Apache Ignite 的 SQL 引擎支持 標準 SQL 函數&#xff08…
閱讀更多...
Oracle 11g RAC數據庫實例重啟的兩種方式

Oracle 11g RAC數據庫實例重啟的兩種方式

Oracle 11g RAC數據庫實例重啟的兩種方式 使用SQLPlus重啟數據庫實例 使用SRVCTL重啟數據庫實例 Administrator-Managed還是Policy-Managed ?? 關于關閉RAC的數據庫實例： 在Oracle RAC中，單獨關閉一個實例不會影響到其他正在運行的實例。 要完全關閉Oracle RAC數據庫，需要…
閱讀更多...
分別使用 Java 8 和 Python 調用 Elasticsearch 接口簡單獲取數據

分別使用 Java 8 和 Python 調用 Elasticsearch 接口簡單獲取數據

使用 Java 8 首先，確保在您的 pom.xml 文件中添加了正確的 Maven 依賴： <dependency><groupId>co.elastic.clients</groupId><artifactId>elastic
閱讀更多...
【通識】數據結構

【通識】數據結構

數據結構邏輯結構物理結構&#xff08;存儲結構&#xff09;&#xff0c;數據結構是計算機中存儲、組織數據的方式。 其中物理結構是數據的邏輯結構在計算機中的存儲形式。而存儲器針對內存而言&#xff0c;像硬盤、軟盤、光盤等外部存儲器的數據組織常用文件結構描述。1. 基礎…
閱讀更多...
Ubuntu22.04提示找不到python命令的解決方案

Ubuntu22.04提示找不到python命令的解決方案

Ubuntu22.04提示找不到python命令的解決方案 問題背景 在Ubuntu22.04中按照獲取Openharmony源碼中的如下命令&#xff1a; // 方式一&#xff08;推薦&#xff09;&#xff1a;通過repo ssh下載&#xff08;需注冊公鑰&#xff0c;請參考碼云幫助中心&#xff09;。repo in…
閱讀更多...
RabbitMQ面試精講 Day 6：消息確認與事務機制

RabbitMQ面試精講 Day 6：消息確認與事務機制

【RabbitMQ面試精講 Day 6】消息確認與事務機制 開篇 歡迎來到"RabbitMQ面試精講"系列的第6天&#xff01;今天我們將深入探討RabbitMQ中確保消息可靠性的兩大核心機制&#xff1a;消息確認與事務機制。這兩個特性是面試中高頻出現的熱點問題&#xff0c;也是生產環…
閱讀更多...
被困擾的elementplus樣式修改問題：select選擇器修改和el-input修改

被困擾的elementplus樣式修改問題：select選擇器修改和el-input修改

一、Select選擇器的原生樣式的本來面貌這是原生的沒有經過任何加工的面貌&#xff1a;這是沒有經過任何加工的選中時出現下拉框的面貌&#xff1a;這是沒有經過加工的懸浮下拉菜單的面貌&#xff1a;這是沒有經過加工的選中時的面貌&#xff1a;二、如何修改Select選擇器&#…
閱讀更多...
GO 從入門到精通2

GO 從入門到精通2

Go語言的反射&#xff08;Reflection&#xff09;機制通過 reflect 包實現&#xff0c;允許程序在運行時動態檢查、修改和操作變量的類型信息和值。以下是反射的核心概念、用法及注意事項的詳細解析&#xff1a;一、反射的基本概念reflect.Type 表示變量的類型信息&#xff0c;…
閱讀更多...
常用設計模式系列（十二）—享元模式

常用設計模式系列（十二）—享元模式

常用設計模式系列&#xff08;十二&#xff09;—享元模式 第一節 前言 昏昏沉沉的兩天過去了&#xff0c;也不知道為什么&#xff0c;突然總覺得很困&#xff0c;可能之前熬夜熬的多了&#xff0c;所以現在可能年紀大了&#xff0c;需要蹦一蹦才能把自己從頹廢的邊緣拉扯回來&…
閱讀更多...
基于spring boot的醫院掛號就診系統(源碼+論文)

基于spring boot的醫院掛號就診系統(源碼+論文)

一、開發環境 技術/工具描述MYSQL數據庫1. 體積小&#xff0c;安裝便捷&#xff1a;MySQL數據庫體積小&#xff0c;占用內存小&#xff0c;不影響電腦上其他軟件的運行&#xff0c;并且不需要因為安裝維護MySQL數據庫而重裝系統。2. 適合老舊電腦&#xff1a;作為學習開發的電…
閱讀更多...
spring-security

spring-security

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId> </dependency>spring: security: user: name: root password: 123456 這個配置在訪問接口時候根據您提供的Spring Secur…
閱讀更多...
最新文章

Copyright @ 2022~2023