RN開發環境搭建


今天,簡單講講Android React Native開發環境搭建。

首先講講什么是React Native開發(RN開發)?

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

一句話總結,就是使用RN開發可以一套代碼,編譯出Android和IOS兩個平台的app.

我參考的網站:https://reactnative.cn/docs/getting-started.html

搭建開發環境

RN版本:0.61

開發平台: Windows(如果你是Windows平台你不能開發ios哦,那就自己買mac吧)
目標平台: Android

結合RN官網,並且自己在搭建中的問題分享!

安裝依賴

必須安裝的依賴有:Node、Python2、JDK 和 Android Studio。

雖然你可以使用任何編輯器來開發應用(編寫 js 代碼),但你仍然必須安裝 Android Studio 來獲得編譯 Android 應用所需的工具和環境。

Node, Python2, JDK

我們建議直接使用搜索引擎搜索下載 Node 、Python2 和Java SE Development Kit (JDK)

javaJDK1.8:  https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

注意 Node 的版本必須大於等於 10,Python 的版本必須為 2.x(不支持 3.x),而 JDK 的版本必須是 1.8(目前不支持 1.9 及更高版本)。安裝完 Node 后建議設置 npm 鏡像(淘寶源)以加速后面的過程。

注意:Python2不介意這樣直接安裝哦,你可以使用管理員身份進入命令行然后:npm install --global windows-build-tools

注意:不要使用 cnpm!cnpm 安裝的模塊路徑比較奇怪,packager 不能正常識別!

# 使用nrm工具切換淘寶源
npx nrm use taobao

# 如果之后需要切換回官方源可使用 
npx nrm use npm

 

Yarn

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

npm install -g yarn 

安裝完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方庫名代替npm install 某第三方庫名

Android 開發環境

如果你之前沒有接觸過 Android 的開發環境,那么請做好心理准備,這一過程相當繁瑣。請萬分仔細地閱讀下面的說明,嚴格對照文檔進行配置操作。

譯注:請注意!!!國內用戶必須必須必須有穩定的FQ工具,否則在下載、安裝、配置過程中會不斷遭遇鏈接超時或斷開,無法進行開發工作。某些FQ工具可能只提供瀏覽器的代理功能,或只針對特定網站代理等等,請自行研究配置或更換其他軟件。總之如果報錯中出現有網址,那么 99% 就是無法正常FQ。

1. 安裝 Android Studio

首先下載和安裝 Android Studio,國內用戶可能無法打開官方鏈接(FQ吧)

如果你不FQ那么給你提供個下載鏈接吧:有谷歌為我們提供的中文域名哦:https://developer.android.google.cn/studio

***********必看*************

1. android studio開發環境的搭建:https://blog.csdn.net/bzlj2912009596/article/details/81534702,具體參考就可以了。

2. 安裝完成Android studio后,需要配置 ANDROID_HOME 環境變量

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

打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 新建,創建一個名為ANDROID_HOME的環境變量(系統或用戶變量均可),指向你的 Android SDK 所在的目錄(具體的路徑可能和下圖不一致,請自行確認):

SDK的環境變量配置:

第一步:添加 ANDROID_HOME

新建系統變量 ANDROID_HOME

變量名:ANDROID_HOME 變量值:D:\Android\SDK

 

 

 

第二步:添加Path變量

此變量已存在,直接編輯即可

變量值:%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

(注意:win10下要分行編輯,且末尾沒有分號)

 

8、添加完成,確認保存。

最后驗證一下:打開cmd命令行窗口:分別輸入 adb android

兩個命令進行驗證,都沒有出錯,則配置成功。

 

創建新項目

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

      使用 React Native 內建的命令行工具來創建一個名為"AwesomeProject"的新項目。這個命令行工具不需要安裝,可以直接用node自帶的npx命令來使用(注意init 命令默認          會    創建最新的版本):

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

  npx react-native init AwesomeProject

提示:你可以使用--version參數(注意是個杠)創建指定版本的項目。例如npx react-native init MyApp --version 0.44.3。注意版本號必須精確到兩個小數點。

提示:如果你在腳手架搭建項目很慢,你可以切換淘寶源:# 使用nrm工具切換淘寶源  npx nrm use taobao, 然后在執行上面的命令!就更快一點啦!

      Windows 用戶請注意,請不要在某些權限敏感的目錄例如 System32 目錄中 init 項目!會有各種權限限制導致不能運行!

       如果你是想把 React Native 集成到現有的原生項目中,則步驟完全不同,請參考集成到現有原生應用

      項目創建完畢的圖:

           

     

      文件目錄:

 

        

 

  

准備 Android 設備

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

使用 Android 真機

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

使用 Android 模擬器

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

Android Studio AVD Manager

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

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

如果你還沒有安裝 HAXM(Intel 虛擬硬件加速驅動),則先點擊"Install HAXM"或是按這篇文檔說明來進行安裝。

然后點擊"Next"和"Finish"來完成虛擬設備的創建。現在你應該可以點擊虛擬設備旁的綠色三角按鈕來啟動它了,啟動完后我們可以嘗試運行應用。

 注意:如果在安裝虛擬機出現:

 

 解決辦法:https://www.cnblogs.com/plBlog/p/12336228.html

 

編譯並運行 React Native 應用

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

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

 

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

也可以嘗試阿里雲提供的maven鏡像,將android/build.gradle中的jcenter()google()分別替換為maven { url 'https://maven.aliyun.com/repository/jcenter' }maven { url 'https://maven.aliyun.com/repository/google' }(注意有多處需要替換)。

如果你的設備的 Android 版本低於 5.0,則可能在運行時看到紅屏,請閱讀在設備上運行這篇文檔來按照步驟解決。

AwesomeProject on Android

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

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM