windows下React-native 環境搭建

公司決定試水react-native，mac審批還沒下來，沒辦法，先用windows硬着頭皮上吧。

參考文章：

React Native 中文網官方文檔

史上最全Windows版本搭建安裝React Native環境配置

安裝windows環境

• Java Development Kit [JDK] 1.8+
• Python 2
• Node
• react-native-cli (React Native命令行工具)

先把jdk1.8+、Python二、node安裝了，這三個不分前後，安裝完畢記得添加環境變量，這裏就很少說了。詳細狀況能夠參照：

搭建Java開發環境

Node官網

python官網

你也能夠使用Chocolatey,它是一個Windows上的包管理器，相似於linux上的yum和 apt-get。

安裝Chocolatey：

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

安裝Python 2：

choco install python2

安裝Node：

choco install nodejs.install

安裝react-native-cli：

npm install -g react-native-cli

搭建Android開發環境

下載Android sdk tools ，它是一個Android sdk 管理工具。點此下載

下載安裝完畢後，選擇SDK Manager打開，下載如下package：

• 在Android 6.0 (Marshmallow)中勾選：
  • Google APIs
  • Intel x86 Atom System Image
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image
• 在SDK Tools中勾選
  • Android SDK Build-Tools 23.0.1。（必須是這個版本）

安裝完畢後，添加ANDROID_HOME環境變量。至此，大功告成。

安裝Android模擬器

官方推薦Genymotion模擬器，我使用了下，確實很好用，而且它對我的是免費的（要註冊）。點此下載

• genymotion須要依賴VirtualBox虛擬機，下載選項中提供了包含VirtualBox和不包含的選項，請按需選擇）。

• 打開Genymotion。若是你尚未安裝VirtualBox，則此時會提示你安裝。

• 建立一個新模擬器並啓動。

• 啓動React Native應用後，能夠按下F1來打開開發者菜單。

run

初始化react-native項目

react-native init <projectName>

啓動項目（打開模擬器）

cd <projectName>
react-native run-android

這一步會啓動服務並在模擬器上安裝項目apk。若是在模擬器上看到你的app了，則表示成功了。

若是在你運行react-native run-android命令後，Packger可能不會自動運行，這時能夠手動運行：

react-native start

判斷package運行成功與否能夠經過訪問：http://localhost:8081/index.android.bundle?platform=android。若是能打開頁面則表示啓動成功。

在模擬器上打開項目app，而後搖一搖手機（模擬器有搖一搖按鈕），或者直接輸入ctrl+m打開調試窗口，點擊Dev Settings後，點擊Debug server host & port for device,設置IP和端口，輸入你的電腦的ip地址，並加上8081端口號。點擊肯定，重啓app。這時你就能看到react-antive界面了。