React Native在Android當中實踐(二)——搭建開發環境

yang0range發表於2018-10-10

React Native在Android當中實踐(一)——背景介紹

React Native在Android當中實踐(二)——搭建開發環境

React Native在Android當中實踐(三)——整合到Android專案當中

React Native在Android當中實踐(四)——程式碼整合

React Native在Android當中實踐(五)——常見問題

搭建開發環境(以Windows為例)

必須安裝軟體
Chocolatey

簡介:Chocolatey(chocolatey.org/)是一個Windows上的一個包管理器,類似於linux上的yum和 apt-get。 你可以在其官方網站上檢視具體的使用說明。一般的安裝步驟應該是下面這樣:

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
複製程式碼

一般來說,使用Chocolatey來安裝軟體的時候,需要以管理員的身份來執行命令提示符視窗。譯註:chocolatey的網站可能在國內訪問困難,導致上述安裝命令無法正常完成。請使用穩定的翻牆工具。 如果你實在裝不上這個工具,也不要緊。下面所需的python2和nodejs你可以分別單獨去對應的官方網站下載安裝即可。

Python 2

開啟命令提示符視窗,使用Chocolatey來安裝Python 2 注意目前不支援Python 3版本

choco install python2
複製程式碼
Node

開啟命令提示符視窗,使用Chocolatey來安裝NodeJS。

choco install nodejs.install
複製程式碼

安裝完node後建議設定npm映象以加速後面的過程 注意:不要使用cnpm!cnpm安裝的模組路徑比較奇怪,packager不能正常識別! ··· npm config set registry registry.npm.taobao.org --globalnpm config set disturl npm.taobao.org/dist --global

···

Yarn、React Native的命令列工具(react-native-cli)

Yarn(yarnpkg.com/zh-Hans/)是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
複製程式碼

如果你遇到EACCES: permission denied許可權錯誤,可以嘗試執行下面的命令(限linux系統): sudo npm install -g yarn react-native-cli. 安裝完yarn之後就可以用yarn代替npm了,例如用yarn代替npm install命令,用yarn add 某第三方庫名代替npm install --save 某第三方庫名。

Android Studio配置

Android Studio需要Java Development Kit [JDK] 1.8(暫不支援更高版本)。你可以在命令列中輸入 javac -version來檢視你當前安裝的JDK版本。如果版本不合要求,則可以到 官網上下載。 或是使用包管理器來安裝(比如choco install jdk8或是apt-get install default-jdk) 除非特別註明,請不要改動安裝過程中的選項。比如Android Studio預設安裝了 Android Support Repository,而這也是React Native必須的(否則在react-native run-android時會報appcompat-v7包找不到的錯誤)。

特別值得注意的是: SDKManager當中SDK Platforms中要勾選 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.

推薦安裝工具
Gradle Daemon(https://docs.gradle.org/2.9/userguide/gradle_daemon.html)
(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")
複製程式碼
測試安裝
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
複製程式碼

輸入命令列出現如下介面:

image.png
手機當中出現:
image.png
表示啟動成功,到此整個Windows下的開發環境搭建到此結束。 提示:你可以使用--version引數建立指定版本的專案。例如react-native init MyApp --version 0.44.3。注意版本號必須精確到兩個小數點。 Windows使用者請注意,請不要在命令列預設的System32目錄中init專案!會有各種許可權限制導致不能執行! 若出現如下問題
image.png
由於在
image.png
缺少這個檔案導致的 可以從已有專案當中複製一個到該目錄下即可。

相關文章