windows安裝React Native開發運行環境

React Native是什麼

React Native是facebook開源的一個用於開發app的框架。React Native的設計理念：既擁有Native (原生) 的用戶體驗、又保留React的開發效率。這個理念彷佛迎合了業界普片存在的痛點，自2015年9月份開源不到1周github star破萬。

雖然React Native官方聲明開發須要使用mac本，可是若是隻是想用React Native來開發一個android應用，也是能夠在windows下進行的。

React Native配置開發運行環境

安裝java運行環境

此處省略，網上教程一大堆，經過java -version檢查是否成功。

安裝android SDK

• android SDK下載地址：AEZO.CN備份 （提取碼：3fb4）

• 在sdk的安裝目錄運行SDK Manager，選擇如下項目，再點擊install packages（注意勾選的SDK platform-tools和SDK Build-tools版本要同樣）

安裝bluestacks

• 下載地址：bluestacks
• 安裝完成後，電腦上就能夠跑app程序了

安裝nodejs

React Native是基於js的，node.js是輕量級的Web服務器，想要是React Native跑起來須要安裝node， 若是沒有安裝node.js，先去官網安裝node.js,最好是4.1以上版本

• 下載地址：nodejs
• 使用node -v（顯示版本號）檢查是否安裝成功

安裝react-native命令行工具react-native-cli

• 下載React Native：React Native 點擊Download ZIP進行下載
• 將文件解壓到某目錄，如：D:\software\react-native
• 在命令行進入到react-native目錄下的react-native-cli，運行命令npm install -g，安裝好以後，能夠在命令行運行react-native命令了。安裝得一會，若是一直沒反映，重啓CMD再次運行

建立RN(React Native)項目

• 命令行進入你但願建立項目的目錄後，輸入react-native init DemoProject，等待一段時間（較慢）

運行package

• 在命令行中進入項目目錄DemoProject，輸入react-native start，等待一段時間
• 這時候能夠用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android，若是能夠訪問表示服務器端已經能夠了

運行項目

• 啓動bluestacks，或者將手機鏈接到電腦（手機要啓動USB調試模式，命令 adb devices 能夠查看當前設備）
• 剛剛運行package的命令行不要關閉，從新啓動一個新的命令行
• 法一：
  
  • 進入項目目錄DemoProject，輸入react-native run-android
  • 等待運行(若是是第一次運行，首先會下載gradle，時間較長)
• 法二（推薦）：
  
  • 打開DemoProject\android\gradle\wrapper目錄下的gradle-wrapper.properties文件
  • 將distributionUrl後面的連接改成國內鏡像地址 http://mta.zttit.com:8080/images/gradle-2.4-all.zip
  • 進入項目目錄DemoProject，輸入react-native run-android（不要關閉package的命令行）。此時bluestacks已經安裝上了此應用，若是沒有能夠在DemoProject\android\app\build\outputs\apk目錄下找到app-debug.apk文件便是生成的安裝包

訪問應用

• 第一次手機確定報錯
• 這時候點擊bluestacks左邊菜單欄的抖動（若是直接鏈接手機，搖一搖手機便可），點擊Dev Settings後，點擊Debug server host & port for device,設置IP和端口。這裏的IP是電腦的IP，不知道的能夠在命令行中輸入ipconfig進行查詢，端口號固定8081
• 設置完成後，回到空白頁面，再次搖一搖手機，選擇Reload JS，程序就運行起來，出現Welcome to React Native！

參考

[1] 史上最詳細Windows版本搭建安裝React Native環境配置
[2] React Native疑難點,問題深坑最強總結帖(不斷更新中)