超詳細 React Native 入坑使用指南，我在元宇宙等你-有解無憂

前言

大家好，我是虛竹，今天給大家分享一下我是如何快速通關打怪搭建 React Native 跨端開發環境，并使用大家非常熟悉的開發工具 VSCode 來撰寫絲滑般的代碼，撰寫絲滑般代碼會再下一篇輸出，包括專案實戰經驗總結和踩坑，如目錄架構、函式式編程、React Hook 靈活運用、常見場景、開發除錯、發布部署、踩坑、性能優化等等，

之前因為在我的技術群，收到群友@我，問能否出一個保姆級 React Native 搭建開發環境的教程，我說照著官方檔案步驟操作即可，可惜事與愿違沒那么順利，流程上繁瑣不夠清晰，版本更新太快，網上解決方案各種說法不一，技術工具也在時時變，

由于最近我們團隊有個新專案，涉及各種端的應用開發任務（如PC端、手機端、平板端、H5端），技術選型上我們前端內部經過激烈討論（之前的專案主導前端框架是 Vue.js），最后決定全部基于 React 框架進行開發，

好處毋庸置疑，緊跟前端發展趨勢嘗試各種新技術，對自身加深印象，技能更上一層，實戰與理論相結合，還能幫助更多新手一起打怪，對團隊成員多掌握一門前端技術，不是孤軍奮戰，我們是一個 Team，💪

為何挑選 React Native

大公司背書技術已成熟
社區活躍開發者多
基于 React 易上手開發效率高
跨平臺兼容性
接近原生應用
秒速重繪
節約公司成本
一次學習，隨處撰寫

介紹 React Native

React Native（簡稱 RN）是 Facebook 于2015年4月開源的跨平臺移動應用開發框架，是 Facebook 早先開源的 JS 框架 React 在原生移動應用平臺的衍生產物，支持 iOS 和安卓兩大平臺，RN 使用 Javascript 語言，類似于 HTML 的 JSX，以及 CSS 來開發移動應用，因此熟悉 Web 前端開發的技術人員只需很少的學習就可以進入移動應用開發領域，

僅供參考

最佳實踐完美組合技術堆疊：React + RN + ES6 + Flex + Hook + Function Component + Axios

前置知識

HTML + CSS + JS（基礎）
React v17.0.2（基礎）
React Hook
RN v0.66
Flex 布局
ES6/7/8
Ajax（Axios）
Node v14.0.0+
Android Studio
中文版官方檔案不離手（React¹ & React Native²）

環境搭建

作業系統：win10 專業版
手機：安卓手機真機一部 & 夜神模擬器一個
必須安裝依賴：Node、Yarn、JDK、Android Studio（Android SDK）、Python2、~~Xcode（Mac）~~

Node 安裝

直接 Node 官網下載對應版本，不過建議使用 NVM 工具來安裝與版本切換方便快捷，

NVM 官網下載地址³

我的 Node 版本是 v14.0.0，官方指定版本要求大于12以上就行，請以管理員身份安裝 Node，然后一直按下一步下一步完成即可，

Yarn 安裝

// 使用 npm 全域安裝 yarn
npm install yarn -g

// 檢查版本是否安裝成功
yarn -v

配置環境變數，如下圖所示：

python2 安裝與配置

Windows 10 平臺，以管理員身份安裝 python2.7，執行命令如下：

npm install --global --production windows-build-tools

我的電腦 -> 屬性 -> 高級系統設定 -> 環境變數 -> 新建系統變數 -> path 路徑新建環境變數，如下圖所示：

// 檢驗配置是否成功
python -V

JDK 安裝與配置

JDK 下載安裝

JDK 1.8官網下載地址⁴

可以根據自己的電腦作業系統選擇對應版本下載到本地，如下圖所示：

JDK 環境變數配置

我的電腦 -> 屬性 -> 高級系統設定 -> 環境變數 -> 新建系統變數 -> path 路徑新建環境變數，如下圖所示：

// 檢驗配置是否成功
java or java -version or javac

Android Studio 下載與安裝

無需單獨下載安裝 Android SDK 依賴，而是通過安裝 Android Studio 開發工具，會默認安裝最新版 Android SDK，目前編譯 React Native 應用需要的是 Android 10 (Q)版本的 SDK（注意 SDK 版本不等于終端系統版本，RN 目前支持 android 4.1 以上設備），你可以在 Android Studio 的 SDK Manager 中選擇安裝各版本的 SDK，

首先去官網下載 Android Studio 開發工具⁵

之前從未接觸過 Android 的開發環境，不用擔心，按照我說的步驟執行，很快就能搭建起開發環境，

點擊下載到本地，下載完成后，雙擊安裝包，按照提示下一步下一步直到完成，如下圖所示：

看到上面的界面，說明已安裝成功了，點擊 finish 按鈕完成即可，

Android SDK 安裝

SDK Manager 你可以在 Android Studio 的"Preferences"選單中找到，具體路徑是Appearance & Behavior -> System Settings -> Android SDK，如下圖所示：

SDK Manager 你還可以在 Android Studio 的"Tools"選單中找到，如下圖所示：

在 SDK Manager 中選擇"SDK Platforms“選項卡，然后在右下角勾選”Show Package Details"，展開 Android 10 (Q)選項，確保勾選了下面這些組件（重申你必須使用穩定的代理軟體，否則可能都看不到這個界面）：

Android SDK Platform 29
Intel x86 Atom_64 System Image（官方模擬器鏡像檔案，使用非官方模擬器不需要安裝此組件)

然后點擊"SDK Tools“選項卡，同樣勾中右下角的”Show Package Details"，展開"Android SDK Build-Tools"選項，確保選中了 React Native 所必須的29.0.2版本，你可以同時安裝多個其他版本，

然后還是在"SDK Tools“選項卡，點擊”NDK (Side by side)"，同樣勾中右下角的"Show Package Details"，選擇20.1.5948944版本進行安裝，

最后點擊"Apply"來下載和安裝這些組件，

Android SDK 配置環境變數

如下圖所示：

初始化專案

npx react-native init MyApp

再來看看下載到本地的專案目錄結構，如下圖所示：

我們來試試打開 Android Studio 工具，點擊 open 按鈕，選擇對應需要匯入的專案，如下圖所示：

出現以下畫面說明匯入專案成功，如下圖所示：

哎呦，媽呀😮?，怎么回事，長得不一樣呢，這是要我開發 Android 原生的節奏，一臉懵逼，手一抖，直接把 Android Studio 關了，不用著急，關掉了不礙事，重啟一下工具就好了，下面我們講講怎么在 VSCode 編輯器工具撰寫絲滑般的代碼，

VSCode 搭建 React Native

安裝 React Native Tools

在插件市場搜索 react 找到 React Native Tools 進行安裝，如下圖所示：

匯入之前創建好的工程專案到 VSCode 中，如下圖所示：

插件安裝完成后按F1可以看到命令里有很多關于 React Native 的選項，如下圖所示：

初始專案需要添加配置，在選單欄點擊運行 -> 添加配置 -> 選擇 React Native，如下圖所示：

最后 lanuch.json 檔案會新增以下代碼，如圖所示：

直接按F5快捷鍵運行 React Native 會提示報錯，你還沒有可用的 Android 設備，這里所指的設備既可以是真機，也可以是模擬器，如下圖所示：

直接在終端編譯并運行 React Native 專案，命令如下：

cd MyApp
yarn android
or
yarn react-native run-android

報錯截圖如下所示：

準備安卓設備

使用 Android 真機

我們可以使用 Android 真機來代替模擬器進行開發，非常方便開發測驗一次搞定，只需用 USB 資料線連接到我的電腦，具體操作步驟如下，

開啟 USB 除錯

首先你需要開啟 USB 除錯才能自由安裝開發版本的 APP，不同的手機開啟方式不一樣，請網上自行查閱，

手機設定 -> 系統和更新 -> 開發人員選項 -> 開啟 USB 除錯，如下圖所示：

通過 USB 資料線連接設備

下面檢查你的設備是否能正確連接到 ADB（Android Debug Bridge），使用adb devices命令如圖所示：

如出現安卓設備 adb 連接后顯示 device unauthorized 代表設備未授權，解決方法如下：

打開手機，進入開發人員選項，找到并點擊撤銷 USB 除錯模式，

最后將手機重新連接電腦，依次輸入指令如下命令：

adb kill-server
adb start-server
adb devices

輸指令時看到手機彈出授權對話框，點擊確定或允許按鈕即可，我們看到下圖所示就說明 adb 授權成功了，

紅框顯示說明我的設備已經正確連接了，注意，你每次只需連接一個設備即可，如果你連接了多個設備（包含模擬器在內），后續的一些操作可能會失敗，拔掉不需要的設備，或者關掉模擬器，確保 adb devices 的輸出只有一個是連接狀態，

記錄一下 Android 真機除錯無法安裝，顯示簽名不一致，如下圖所示：

解決方法

找到目錄路徑：android -> app -> build.gradle 修改默認組態檔，如下圖所示：

改完后，重新運行命令yarn android，出現以下畫面說明修改成功，點擊繼續安裝即可，如圖：

查看真機界面顯示效果圖：

手機搖一搖，會彈出除錯選單模式，如下圖所示：

Reload
重繪頁面，修改JS檔案時，重繪功能才起作用，如新增檔案或修改原生代碼都需重新編譯應用才會生效，
Change Bundle Location
改變打包后的URL地址
Show Element Inspector
是否顯示元素檢查器，查看到當前選中元素的位置、樣式、層級關系、盒子模型資訊等等，方便我們快速定位問題，
Disable Fast Refresh
禁止快速重繪
Show Perf Monitor
是否顯示監控視窗，實時展示記憶體占用、UI 和 JS 的 FPS 等資訊，幫助我們除錯性能問題，
Settings
性能除錯設定
Enable Sampling Profiler
是否開啟采樣分析器
Debug
開啟遠程除錯，可通過Chrome Developer Tools工具除錯程式，選中后將打開網址為http://localhost:8081/debugger-ui/

使用 Android 模擬器

你可以使用 Android Studio 打開專案下的"android"目錄，然后可以使用"AVD Manager"來查看可用的虛擬設備，如下圖所示：

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

對于不熟悉不會使用 Android Studio 工具是一件費時費力的作業，所以這里推薦大家選用一個夜神模擬器開發除錯 React Native，直接去官網下載安裝即可，模擬器下載地址⁷：

VSCode 終端運行adb devices命令發現連不上夜神模擬器，原因是 adb 版本不匹配，如圖：

解決方法

將D:\Android\Sdk\platform-tools中adb.exe拷貝到夜神模擬器安裝目錄中nox_adb.exe和adb.exe 兩個都替換，重啟夜神模擬器即可，

如果再次執行adb devices命名發現找不到設備（VSCode No Device），只需配置一下環境變數，再執行此命令nox_adb.exe connect 127.0.0.1:62001即可，

夜神模擬器連接成功后，運行命令yarn android，出現以下畫面說明開發環境已搭建OK，如下圖所示：

到這里真機和模擬器都可以愉快的玩耍了，修改一下 JS 檔案內容，可及時看到修改后的效果，Perfect

手機螢屏投影工具

推薦一款好用的 Android 手機投屏神器scrcpy，有興趣可以試試，

Linux: apt install scrcpy
Windows: 下載地址⁸
macOS: brew install scrcpy

scrcpy是通過 adb 除錯的方式來將手機螢屏投到電腦上，并可以通過電腦控制你的 Android 設備，它可以通過 USB 連接，也可以通過 Wifi 連接（類似于隔空投屏），而且不需要任何 root 權限，不需要在手機里安裝任何程式，scrcpy 同時適用于 GNU / Linux，Windows 和 MacOS，

具體操作詳情請移步到這里：👉scrcpy 詳細教程⁹

VSCode 插件

打開 VSCode 工具，點擊進入擴展插件界面，搜索 react 安裝自動生成代碼片段插件，如下圖所示：

輸入rnfes回車立馬生成 React Native 代碼片段，如圖所示：

結語

天河區塊鏈前端正急缺人才，如果你想加入我們，歡迎加我微信和我聯系，另外如果你想加入高質量前端交流群，或者你有任何其他事情想和我交流也可以添加我的個人微信lazycode520，

文中如有錯誤，歡迎在評論區留言，如果這篇文章幫助到了你，歡迎點贊、在看和關注，你的點贊、在看和關注是對我最大的支持！🤞

創作不易，你的每一個點贊、在看、分享都是對我最大的支持！??

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/386636.html

標籤：其他

上一篇：Linux平臺上直接運行Android應用，android開發入門與實戰體驗

下一篇：移動應用開發實驗十 —— 網路通信

超詳細 React Native 入坑使用指南，我在元宇宙等你

前言