React Native (簡稱RN)是Facebook于2015年4月開源的跨平台移動應用開發架構,是Facebook早先開源的UI架構 React 在原生移動應用平台的衍生産物,目前支援iOS和Android兩大平台。
RN的環境搭建在RN的中文社群有所介紹,但是對于小白來說還是有些太過簡略了。RN中文社群詳見參考,本文不涉及的問題也許在其中能夠有所解答。
React Native思想
底層引擎是 JavaScript Core,但調用的是原生的元件而非 HTML5 元件。這樣運作時可以做到與 Navive App 相媲美的性能體驗,同時因為 JavaScript 代碼可以使用後端強大的 Web 方式管理,既可以做到高效開發,也可以實作快速部署和問題熱修複。
搭建開發環境(Windows)
React native目前支援三大平台(Windows、macOS、Linux)搭建開發環境,在此隻介紹一下Windows下環境的搭建,其他平台可參照官方網站
- 1 Chocolatey
Chocolatey是一個Windows上的包管理器,類似于linux上的yum和 apt-get。 你可以在其官方網站上檢視具體的使用說明。一般的安裝步驟應該是下面這樣:cmd以管理者身份運作
然後在其中輸入:
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
- 2 Python 2
關閉之前的cmd,再次打開指令提示符視窗,使用Chocolatey來安裝Python 2,輸入:
choco install python2
- 3 Node
使用Chocolatey來安裝NodeJS,輸入:
choco install nodejs.install
安裝完node後建議設定npm鏡像以加速後面的過程,cmd中輸入:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
- 4 Yarn、React Native的指令行工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node子產品的下載下傳。React Native的指令行工具用于執行建立、初始化、更新項目、運作打包服務(packager)等任務。
npm install -g yarn react-native-cli
安裝完yarn後同理也要設定鏡像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
- 5 Android Studio
Android Studio需要Java Development Kit [JDK] 1.8(暫不支援更高版本)。你可以在指令行中輸入 javac -version來檢視你目前安裝的JDK版本。如果版本不合要求,則可以到官網上下載下傳或者自行百度查找,配置好環境變量。
Android Studio包含了運作和測試React Native應用所需的Android SDK和模拟器(真機)
除非特别注明,請不要改動安裝過程中的選項。比如Android Studio預設安裝了 Android Support Repository,而這也是React Native必須的(否則在react-native run-android時會報appcompat-v7包找不到的錯誤)。
- 确定所有安裝都勾選了,尤其是Android SDK和Android Device Emulator。
- 在初步安裝完成後,選擇Custom安裝項:
- 檢查已安裝的元件,尤其是模拟器和HAXM加速驅動。
- 安裝完成後,在Android Studio的歡迎界面中選擇Configure | SDK Manager。
- 在SDK Platforms視窗中,選擇Show Package Details,然後在Android 6.0 (Marshmallow)中勾選Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
- 在SDK Tools視窗中,選擇Show Package Details,然後在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1(必須包含有這個版本。當然如果其他插件需要其他版本,你可以同時安裝其他多個版本)。然後還要勾選最底部的Android Support Repository
- 接下來就可以搭建并測試第一個Android studio 項目了。new project
- 值得一提的是Android版本的,記得選擇Android 6.0,之前選取的工具都是與之對應的。
- 選擇empty activity
- Finish之後,就進入了漫長的項目配置過程,加載到項目後,還需初始化一些東西。在android studio底部可以看到。首次運作需要等待數分鐘并從網上下載下傳gradle依賴。(個時間可能耗時很久,也可能會不停報錯連結逾時、連接配接中斷等等——取決于你的網絡狀況和牆的不特定阻斷。總之要順利下載下傳,請使用穩定有效的科學上網工具。),你可以百度資源,所需的gradle包在gradle-wrapper.properties中,
- 下載下傳完成後,把zip放置在gradle目錄中,C:\Users\A\.gradle\wrapper\dists,一般在自己的磁盤下搜尋 .grale就可以查到目錄,這個目錄最好先讓android studio 自己生成好後,取消自己fetch檔案,然後自己去下載下傳好gradle-xxx-all-zip檔案,放到對應的目錄下:
- 例如我要3.3版本的放在C:\Users\Administrator\.gradle\wrapper\dists\gradle-3.3-all\55gk2rcmfc6p2dg9u9ohc3hw9下然後C:\Users\Administrator\.gradle\caches\3.3下,讓android studio自己fetch ,這樣的速度就快了.
- 配置完成後的大概目錄是這樣:
- 在右上角的 可以建立Android模拟器
- 點選 運作,選擇模拟器或真機,運作成功如圖。
Android studio主要還是提供React Native所需要的一些環境,RN開發我所用的是VSCode
- ANDROID_HOME環境變量
- 確定ANDROID_HOME環境變量正确地指向了你安裝的Android SDK的路徑。 打開控制台 -> 系統和安全 -> 系統 -> 進階系統設定 -> 進階 -> 環境變量 -> 建立,方法同JDK。
- 6 Visual Studio Code
Microsoft的一款針對編寫現代 Web 和雲應用的跨平台源代碼編輯器,做為我們的統一開發工具
你可以直接從官方網站下載下傳安裝
安裝完VSCode之後,請安裝Prettier, eslint, React Native Tools等插件
在用于React Native開發前,需要先在系統資料庫中進行一些修改:
- 打開運作指令(按下Windows+R鍵/cmd)
- 輸入
然後回車regedit.exe
- 在系統資料庫編輯器中找到
條目HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools
- 右鍵點選
,(如果沒有找到,請右鍵wow6432node自行建立)選擇Android SDK Tools
建立 > 字元串值
- 名稱設為
Path
- 輕按兩下
,将其值設為你的Android SDK的路徑。(例如Path
)C:\Program Files\Android\sdk
測試安裝:
cd到所需工作目錄下,按如下指令:
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
首次運作需要等待數分鐘并從網上下載下傳gradle依賴。(這個過程螢幕上可能出現很多小數點,表示下載下傳進度。這個時間可能耗時很久,也可能會不停報錯連結逾時、連接配接中斷等等——取決于你的網絡狀況和牆的不特定阻斷。總之要順利下載下傳,請使用穩定有效的科學上網工具。)
運作完畢後可以在模拟器或真機上看到應用自動啟動了。
如果apk安裝運作出現報錯,
請檢查上文中安裝SDK的環節裡所有依賴是否都已裝全,platform-tools是否已經設到了PATH環境變量中,運作adb devices能否看到裝置
。
-
至此,應該能看到app紅螢幕報錯,這是正常的,我們還需要配置ip端口,讓app正确通路pc端的packager服務。
-
一般運作完成的cmd視窗應該如圖:
-
現在開始處理紅窗問題(真機),首先确認你的手機和筆記本在同一網内,筆記本電腦可以通過熱點與之相連,如:
- 你需要打開搖一搖菜單(搖一下裝置,或者按下裝置的 Menu 鍵,或者在模拟器上按下 F2 或 Page Up,Genymotion 按下 ⌘+M),可以打開調試菜單,點選Dev Settings,選Debug server host for device,輸入你的
(同時要保證手機和電腦在同一網段,且沒有防火牆阻攔)【如我的192.168.137.1:8081(注意IP端口最後為1)】,再按back鍵傳回,再按Menu鍵,在調試菜單中選擇Reload JS,就應該可以看到運作的結果了。正在運作packager的那台電腦的區域網路IP加:8081
-
附上最後的運作結果:
如果仍然為紅窗,且報錯:error: bundling failed: "Unable to resolve module `AccessibilityInfo` from `/Users/apple/WebstormProjects/carracing2/node_modules/react-native/Libraries/react-native/react-native-implementation.js`: Module does not exist in the module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: `watchman watch-del-all`.\n 2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n 3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`."
這個問題可能是新版本的bug,降級一下RN的版本
請用VSCode編譯你的項目,删減和修改代碼 package.json和app.js
h{
"name": "MyPr",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.2.0",
"react-native": "0.53.3"
},
"devDependencies": {
}
應該就可以解決紅屏問題了。
其他安裝項
- Git
使用Git做為代碼管理軟體,Git是目前世界上最先進的分布式版本控制系統(沒有之一)
你可以直接去Git for Windows官網下載下傳。 在安裝過程中注意勾選"Run Git from Windows Command Prompt",這樣才會把git指令添加到PATH環境變量中
- Visual Studio Emulator for Android
Visual Studio Emulator for Android)是利用了Hyper-V技術進行硬體加速的免費android模拟器。也是Android Studio自帶的原裝模拟器之外的一個很好的選擇。而且你并不需要安裝Visual Studio。
- 參考:https://blog.csdn.net/wuqilianga/article/details/62045828
- http://bbs.reactnative.cn/topic/10/%E5%9C%A8windows%E4%B8%8B%E6%90%AD%E5%BB%BAreact-native-android%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/2
- https://reactnative.cn/docs/0.51/getting-started.html#content