windows系統安裝配置react-native運行環境

最近公司要開發react-native項目，本身在windows系統上練習了一下，過程當中發現好多問題，在這裏整理出來供你們參考；

1、首先來看一下 reactNative官網

官網上的教程很詳細，介紹了IOS和Android的環境搭建、示例教程等等，建議你們先按照官網的環境搭建教程嘗試搭建，
遇到問題再上網搜索答案，這樣印象會深入一些；

下面就按照官網教程來詳細講解一下**IOS和Android的環境搭建**

2、IOS和Android的環境搭建

• 穩定的-Fan Qiang-工具

  安裝 Android Studio 須要-Fan Qiang-才能下載，安裝配置 Android Studio 的時候也要用到-Fan Qiang，因此你須要有一個穩定的-Fan Qiang-工具；（注意穩定，不然會出現下載失敗、連接超時的狀況）

  我用的是小飛機，就不在這裏多說了，你們自行搜索；

• NodeJs
  下載Node版本必須高於8.3。
• Python2
  下載Python 的版本必須爲 2.x（不支持 3.x）
• JDK
  下載JDK 的版本必須是 1.8（目前不支持 1.9 及更高版本）

- 下載安裝Android Studio
上步操做完成就開始下載 Android Studio；
官網上介紹安裝是這樣說的：

安裝界面中選擇"Custom"選項，確保選中瞭如下幾項：
    
    Android SDK
    
    Android SDK Platform
    
    Performance (Intel ® HAXM) (AMD 處理器看這裏)
    
    Android Virtual Device
    
    而後點擊"Next"來安裝選中的組件。
    
    **若是選擇框是灰的，你也能夠先跳過，稍後再來安裝這些組件。**

我安裝的時候，這幾項確實是不能選中的，因此直接「Next」 ，若是你的-Fan Qiang-工具足夠穩定，那就不用擔憂，後面的步驟中會讓你安裝這些的，因此按照官網教程往下走就能夠了；

- 配置 ANDROID_HOME 環境變量

這裏直接從官網copy了

React Native 須要經過環境變量來了解你的 Android SDK 裝在什麼路徑，從而正常進行編譯。

打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量 -> 新建，建立一個名爲ANDROID_HOME的環境變量（系統或用戶變量都可），指向你的 Android SDK 所在的目錄（具體的路徑可能和下圖不一致，請自行確認）：

SDK 默認是安裝在下面的目錄：

c:Users你的用戶名AppDataLocalAndroidSdk

你能夠在 Android Studio 的"Preferences"菜單中查看 SDK 的真實路徑，具體是Appearance & Behavior → System Settings → Android SDK。

你須要關閉現有的命令符提示窗口而後從新打開，這樣新的環境變量才能生效。

- 把 platform-tools 目錄添加到環境變量 Path 中

打開控制面板 -> 系統和安全 -> 系統 -> 高級系統設置 -> 高級 -> 環境變量，選中Path變量，而後點擊編輯。點擊新建而後把 platform-tools 目錄路徑添加進去。

此目錄的默認路徑爲：

c:Users你的用戶名AppDataLocalAndroidSdkplatform-tools

- 安裝 Android SDK

在 Android Studio 的歡迎界面中找到 SDK Manager。點擊"Configure"，而後就能看到"SDK Manager"

在 SDK Manager 中選擇"SDK Platforms"選項卡，而後在右下角勾選"Show Package Details"。
展開Android 9 (Pie)選項，確保勾選了下面這些組件（重申你必須使用穩定的-Fan Qiang-工具，不然可能都看不到這個界面）：

Android SDK Platform 28

Intel x86 Atom_64 System Image（官方模擬器鏡像文件，使用非官方模擬器不須要安裝此組件）

而後點擊"SDK Tools"選項卡，一樣勾中右下角的"Show Package Details"。展開"Android SDK Build-Tools"選項，確保選中了 React Native 所必須的28.0.3版本。你能夠同時安裝多個其餘版本。

最後點擊"Apply"來下載和安裝這些組件。

- 安裝安卓虛擬機

不建議使用Android Studio自帶的虛擬機，由於聽說是性能較差、操做不方便等問題；
推薦使用Genymotion，企業版是收費的，可是我的版本是免費的，你們能夠選擇我的版本進行下載；
一、首先註冊

二、選擇我的版本（免費），下載vbox版本

三、下載、安裝完成後登陸：

四、登陸成功後會出現安卓機型列表，點擊想要安裝的虛擬機後面的「三個點」進行下載安裝；

虛擬機啓動成功！

3、一切準備就緒，如今開始建立reactNative項目**

使用 React Native 命令行工具來建立一個名爲"AwesomeProject"的新項目：

一、react-native init AwesomeProject
*建立成功後在文件資源管理器中會看到 AwesomeProject 這個文件夾

二、cd AwesomeProject

三、react-native run-android

運行這一步驟的時候後會打開node界面

*第三步很容易出現問題，這一步嚴重依賴-Fan Qiang-工具，建議在確保工具正常巡行的狀況下執行此步驟，若是出現失敗等問題，請檢查工具是否運行正常；



項目運行成功！

---

參考文檔：https://reactnative.cn/docs/g...