今天,簡單講講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,那么可能需要先創建一個虛擬設備。點擊"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,則可能在運行時看到紅屏,請閱讀在設備上運行這篇文檔來按照步驟解決。
yarn react-native run-android
只是運行應用的方式之一。你也可以在 Android Studio 中直接運行應用。