天天看點

Windows下搭建React Native開發環境

1.Chocolatey

需要以管理者的身份來運作指令提示符視窗, Win10開始菜單->滑鼠右鍵->Windows PowerShell(管理者)

  1. @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

注意目前不支援Python 3版本。

  1. choco install python2

3.Node

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

  1. choco install nodejs.install

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

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

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

4.Yarn、React Native的指令行工具(react-native-cli)

Yarn是Facebook提供的替代npm的工具,可以加速node子產品的下載下傳。React Native的指令行工具用于執行建立、初始化、更新項目、運作打包服務(packager)等任務。

  1. npm install -g yarn react-native-cli

安裝完yarn後同理也要設定鏡像源:

  1. yarn config set registry https://registry.npm.taobao.org --global

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

安裝完yarn之後就可以用yarn代替npm了,例如用yarn代替npm install指令,用yarn add 某第三方庫名代替npm install --save 某第三方庫名。 

注意:目前npm5(發文時最新版本為5.0.4)存在安裝新庫時會删除其他庫的問題,導緻項目無法正常運作。請盡量使用yarn代替npm操作。

5.Android Studio

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

  • 在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.

6.ANDROID_HOME環境變量

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

打開控制台 -> 系統和安全 -> 系統 -> 進階系統設定 -> 進階 -> 環境變量 -> 建立 

Windows下搭建React Native開發環境

推薦工具

7.Gradle Daemon

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

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

8.将Android SDK的Tools目錄添加到PATH變量中

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

打開控制台 -> 系統和安全 -> 系統 -> 進階系統設定 -> 進階 -> 環境變量 -> 選中PATH -> 輕按兩下進行編輯 

Windows下搭建React Native開發環境

9.測試安裝

  1. react-native init AwesomeProject

  2. cd AwesomeProject

  3. react-native run-android

代碼編寫工具

10.WebStorm

http://www.jetbrains.com/webstorm/download/download-thanks.html 

安裝之後激活 

方法一:(更新時間:2018/4/8)v3.3 

注冊時,在打開的License Activation視窗中選擇“License server”,在輸入框輸入下面的網址: 

http://idea.wrbugtest.tk/ (2018/06/16) 

點選:Activate即可。 

參考:https://blog.csdn.net/voke_/article/details/76418116