ReactNative環(huán)境搭建的教程
注意 Node 的版本應大于等于 16，安裝完 Node 后建議設置 npm 鏡像（淘寶源）以加速后面的過程（或使用科學上網(wǎng)工具）。
前言
如果你之前沒有接觸過 Android 的開發(fā)環(huán)境，那么請做好心理準備，這一過程相當繁瑣。請萬分仔細地閱讀下面的說明，嚴格對照文檔進行配置操作。
譯注：請注意?。?！國內用戶必須必須必須有穩(wěn)定的代理軟件，否則在下載、安裝、配置過程中會不斷遭遇鏈接超時或斷開，無法進行開發(fā)工作。某些代理軟件可能只提供瀏覽器的代理功能，或只針對特定網(wǎng)站代理等等，請自行研究配置或更換其他軟件。總之如果報錯中出現(xiàn)有網(wǎng)址，那就是因為鏈接源倉庫的網(wǎng)絡鏈接被阻斷了，這一阻斷現(xiàn)象可能因時間、地區(qū)、運營商而不同。
一、環(huán)境搭建
低于 0.73 版本的 React Native 需要 JDK 11 版本，而低于 0.67 的需要 JDK 8 版本。
- 注意：強烈建議始終選擇 Node 當前的 LTS （長期維護）版本，一般是偶數(shù)版本，不要選擇偏實驗性質的奇數(shù)版本。
- 注意：不要使用 cnpm！cnpm 安裝的模塊路徑比較奇怪，packager 不能正常識別！
二、使用步驟
1.安裝jdk
因為我這里用的是0.68版本所以使用JDK 11 去官網(wǎng)下載JDK11 Temurin或Oracle JDK上下載(后者下載需注冊登錄)
java JDK安裝成功
2.安裝Android Studio
鏈接：下載 Android Studio 和應用工具 - 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。
把紅箭頭標注的東西都選擇好
然后點擊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)設置 -> 高級 -> 環(huán)境變量 -> 新建，創(chuàng)建一個名為ANDROID_HOME的環(huán)境變量，它指向的是你的 Android SDK 所在的目錄，具體的路徑可能和下圖不一致，請自行確認
然后在Path配置
點開編輯后
創(chuàng)建新項目
如果你之前全局安裝過舊的react-native-cli命令行工具，請使用npm uninstall -g react-native-cli卸載掉它以避免一些沖突。
使用 React Native 內建的命令行工具來創(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盤可能模擬器運行不起來因為有中文路徑
可以自己手動配置變量安裝在別的路徑
總結
React Native 是一個由 Facebook 開發(fā)的開源框架，用于構建跨平臺移動應用程序。它允許開發(fā)人員使用 JavaScript 和 React 來編寫移動應用，同時生成真正的原生應用。
這意味著可以使用相同的代碼庫構建 iOS 和 Android 應用，從而提高開發(fā)效率和代碼復用性。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
分頁在很多地方都可以用到，本文主要實現(xiàn)了react分頁顯示，主要使用三個組件，父組件listBox、列表組件List、按鈕組件PageButton，感興趣的可以了解一下2021-08-08
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文件轉為圖片,用于頁面展示
這篇文章主要介紹了react-pdf實現(xiàn)將pdf文件轉為圖片,用于頁面展示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Antd react上傳圖片格式限制的實現(xiàn)代碼,本文通過實例代碼圖文效果給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-12-12
react以create-react-app為基礎創(chuàng)建項目
這篇文章主要介紹了react以create-react-app為基礎創(chuàng)建項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了詳解react-refetch的使用小例子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
本篇文章主要介紹了ios原生和react-native各種交互的示例代碼，非常具有實用價值，需要的朋友可以參考下2017-08-08
最近項目為了避免用戶誤操作導致數(shù)據(jù)丟失,增加返回攔截功能,但是之前由于qiankun的報錯導致這個功能一直有一些問題,所以專門獨立搞了一個專題研究在react中各種方式實現(xiàn)這個功能,需要的朋友可以參考下2024-05-05
react如何實現(xiàn)側邊欄聯(lián)動頭部導航欄效果
這篇文章主要介紹了react如何實現(xiàn)側邊欄聯(lián)動頭部導航欄效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了React組件通信,在開發(fā)中組件通信是React中的一個重要的知識點，本文通過實例代碼給大家講解react中常用的父子、跨組件通信的方法，需要的朋友可以參考下2022-12-12