1. 程式人生 > >React Native 搭建開發環境

React Native 搭建開發環境

ng- 到你 ram 搭建 build node install variable 工具

歡迎使用React Native!這篇文檔會幫助你搭建基本的React Native開發環境。如果你已經搭好了環境,那麽可以嘗試一下編寫Hello World。

根據你所使用的操作系統、針對的目標平臺不同,具體步驟有所不同。如果想同時開發iOS和Android也沒問題,你只需要先選一個平臺開始,另一個平臺的環境搭建只是稍有不同。

如果閱讀完本文檔後還碰到很多環境搭建的問題,我們建議你還可以再看看由本站提供的環境搭建視頻教程(macOS iOS、macOS Android、windows Android)、windows環境搭建文字教程、以及常見問題。

目標平臺: iOS Android 開發平臺: macOS Linux Windows

安裝

必需的軟件

Chocolatey

Chocolatey是一個Windows上的包管理器,類似於linux上的yumapt-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的網站可能在國內訪問困難,導致上述安裝命令無法正常完成。請使用穩定的FQ工具。 如果你實在裝不上這個工具,也不要緊。下面所需的python2和nodejs你可以分別單獨去對應的官方網站下載安裝即可。

Python 2

打開命令提示符窗口,使用Chocolatey來安裝Python 2.

註意目前不支持Python 3版本。

choco install python2

Node

打開命令提示符窗口,使用Chocolatey來安裝NodeJS。註意,目前已知Node 7.1版本在windows上無法正常工作,請避開這個版本!

choco install nodejs.install

安裝完node後建議設置npm鏡像以加速後面的過程(或使用科學上網工具)。註意:不要使用cnpm!cnpm安裝的模塊路徑比較奇怪,packager不能正常識別!

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

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

如果你遇到EACCES: permission denied權限錯誤,可以嘗試運行下面的命令(限linux系統): sudo npm install -g yarn react-native-cli.

Android Studio

Android Studio 2.0 or higher.

React Native目前需要Android Studio2.0或更高版本。

Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中輸入 javac -version來查看你當前安裝的JDK版本。如果版本不合要求,則可以到 官網上下載。 或是使用包管理器來安裝(比如choco install jdk8或是 apt-get install default-jdk

Android Studio包含了運行和測試React Native應用所需的Android SDK和模擬器。

除非特別註明,請不要改動安裝過程中的選項。比如Android Studio默認安裝了 Android Support Repository,而這也是React Native必須的(否則在react-native run-android時會報appcompat-v7包找不到的錯誤)。

  • 確定所有安裝都勾選了,尤其是Android SDKAndroid Device Emulator

  • 在初步安裝完成後,選擇Custom安裝項:

技術分享

  • 檢查已安裝的組件,尤其是模擬器和HAXM加速驅動。

技術分享

  • 安裝完成後,在Android Studio的歡迎界面中選擇Configure | SDK Manager

技術分享

  • SDK Platforms窗口中,選擇Show Package Details,然後在Android 6.0 (Marshmallow)中勾選Google APIsAndroid SDK Platform 23Intel x86 Atom System ImageIntel 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_HOME環境變量

確保ANDROID_HOME環境變量正確地指向了你安裝的Android SDK的路徑。

打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 新建

具體的路徑可能和下圖不一致,請自行確認。

技術分享

你需要關閉現有的命令符提示窗口然後重新打開,這樣新的環境變量才能生效。

推薦安裝的工具

Gradle Daemon

開啟Gradle Daemon可以極大地提升java代碼的增量編譯速度。

(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")

將Android SDK的Tools目錄添加到PATH變量中

你可以把Android SDK的tools和platform-tools目錄添加到PATH變量中,以便在終端中運行一些Android工具,例如android avd或是adb logcat等。

打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 選中PATH -> 雙擊進行編輯

註意你的具體路徑可能和下圖不同

技術分享

可選的安裝項

Git

你可以使用Chocolatey來安裝git:

choco install git

另外你也可以直接去下載Git for Windows。 在安裝過程中註意勾選"Run Git from Windows Command Prompt",這樣才會把git命令添加到PATH環境變量中。

Genymotion

比起Android Studio自帶的原裝模擬器,Genymotion是一個性能更好的選擇,但它只對個人用戶免費。

  1. 下載和安裝Genymotion(genymotion需要依賴VirtualBox虛擬機,下載選項中提供了包含VirtualBox和不包含的選項,請按需選擇)。
  2. 打開Genymotion。如果你還沒有安裝VirtualBox,則此時會提示你安裝。
  3. 創建一個新模擬器並啟動。
  4. 啟動React Native應用後,可以按下F1來打開開發者菜單。

Visual Studio Emulator for Android

Visual Studio Emulator for Android)是利用了Hyper-V技術進行硬件加速的免費android模擬器。也是Android Studio自帶的原裝模擬器之外的一個很好的選擇。而且你並不需要安裝Visual Studio。 在用於React Native開發前,需要先在註冊表中進行一些修改:

  1. 打開運行命令(按下Windows+R鍵)
  2. 輸入regedit.exe然後回車
  3. 在註冊表編輯器中找到HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools條目
  4. 右鍵點擊Android SDK Tools,選擇新建 > 字符串值
  5. 名稱設為Path
  6. 雙擊Path,將其值設為你的Android SDK的路徑。(例如C:\Program Files\Android\sdk

測試安裝

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

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

Windows用戶請註意,請不要在命令行默認的System32目錄中init項目!會有各種權限限制導致不能運行!

修改項目

現在你已經成功運行了項目,我們可以開始嘗試動手改一改了:

  • 使用你喜歡的文本編輯器打開index.android.js並隨便改上幾行
  • 按兩下R鍵,或是用Menu鍵(通常是F2,在Genymotion模擬器中是?+M)打開開發者菜單,然後選擇 Reload JS 就可以看到你的最新修改。
  • 在終端下運行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的應用的日誌。

完成了!

恭喜!你已經成功運行並修改了你的第一個React Native應用。

轉:http://reactnative.cn/docs/0.44/getting-started.html#content

React Native 搭建開發環境