windows環境下搭建react native環境

這兩天學習react native環境，被搞得將近崩潰，做爲一個前端小白，小菜鳥，js使用都不太利索，在搭建過程當中遇到太多坑，失敗過太屢次，到最後出現文字的時候，好想抱着張靚穎唱：「終於等到你，還好我沒放棄」。再此寫下一片安裝文檔，藉此與你們交流，望你們，別遇到我這樣的坑，也留下印記，但願下次看到，能沒必要故地重遊。

一：安裝node.js

二：安裝JAVA JDK

這一步基本都沒有什麼問題，配置下jdk的環境變量就能夠了

三：安裝SDK

國內用戶推薦從http://androiddevtools.cn/這裏下載，下載和安裝都很慢，請保持耐心。

若是你已經下載完成了，選擇安裝

在目錄下找到sdk manage,雙擊打開，選擇你想要安裝的安卓版本和鏡像，下載緩慢能夠設置鏡像

若是你順利完成了 ，那麼恭喜你，你很幸運，能夠直接進行下一步。若是報如下錯誤

建議兩個方法：

第一種：

1, 複製 tools目錄 爲一個新的目錄 tools-copy ,此時在android-sdk-windows 目錄下有兩個目錄 tools 和 tools-copy
2, 在tools-copy目錄運行 android.bat ，這樣就能夠正常 update all 了
3, 以後，關閉 sdk,
4, 在 android-sdk-windows 目錄運行 SDK Setup.exe

第二種：
1, 進入sdk的temp文件夾，下載好後會有一個tools_r10-windows.zip(版本號可能會不同，如r15)
2, 解壓此文件，如解壓到tools_r10-windows目錄
3, 進入tools_r10-windows文件夾，將tools_r1006-windows裏的tools文件複製
4, 覆蓋掉sdk根目錄的tools文件夾中的文件

什麼？還不行？沒辦法了，大牛告訴我，不要一條路走到黑，亂鑽牛角尖，咱們能夠換條路走嘛。

下載android studio，選擇合適的目錄安裝，安裝完成後，找到下圖的路徑。

根據路徑的位置，進入相應的文件，如今咱們開始配置sdk環境變量了

計算機-右擊-屬性-高級系統設置

選擇環境變量-新建 變量名：Path 變量值：你的sdk tools和platform-tools所在路徑（個人是.;D:\android-sdk-windows\platform-tools;D:\android-sdk-windows\tools; ）

測試是否配置成功，打開命令行輸入 android 和 adb 分別測試一下

四：安裝git,react-native是依賴於git的,若是已經安裝，請跳過此步驟

      1，首先，根據你的系統，從git官網，下載對應的git版本

      https://git-scm.com/download/ 下載地址

2. 安裝後命令行輸入npm測試是否成功

 譯註：因爲衆所周知的網絡緣由，react-native命令行從npm官方源拖代碼時會趕上麻煩。請將npm倉庫源替換爲國內鏡像：

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

 npm install -g react-native-cli

安裝好以後，能夠命令行下就有react-native命令了

五：建立項目，在你想要建立項目的目錄下打開命令行（shift+右鍵）

回到主窗口，選擇一個咱們已經添加的模擬器，點擊啓動按鈕啓動模擬器。react-native init MyProject

啓動項目
在項目目錄下的命令行，輸入react-native start，等待一段時間
啓動成功後，http://localhost:8081/index.android.bundle?platform=android 在瀏覽器打開這個地址，若是出現下圖，說明成功，服務端已經啓動



六：安裝和配置模擬器
1.模擬器這裏我選擇genymotion，由於速度快，界面也很好看吶，姐姐我但是一個看臉的人呢
http://www.genymotion.net/ 進入下載

選擇註冊，記住用戶名和密碼奧，由於後面會遇到
安裝到你想要安裝的目錄
2.genymotion 依賴於virtualbox，安裝完成後，安裝和配置virtualbox


3,安裝完成後，打開genymotion，這時候你就須要輸入用戶名密碼了


4,，點擊add，新建設備


5，

啓動過程會彈出對話框，詢問是否設置ADB鏈接的對話框，若是須要就點擊是，不然就點擊否。

點擊setting,把sdk路徑改成你本地的sdk地址，便是你配置sdk環境變量路徑的上一級目錄


若是你說，我確實找到了個人路徑，路徑確實是對的，仍是報錯，鏈接不上，那你就要檢查你的鏡像有沒有安裝上了

7.開啓模擬器的wifi，必定要開啓，否則後面會報錯


七：運行
react-native run-android
第一次會比較慢，由於要下載安裝gradle，耐心等待
1，若是命令行報錯，沒法鏈接到服務器環境，而且模擬器界面無變化

多是你sdk tools不完整，返回檢查一下，或者沒有鏈接到模擬器

終於成功了，可是這個紅色的界面是什麼鬼


不過，模擬器界面終於有了變化，歡欣鼓舞有木有
2.點擊菜單，或者搖一搖


選擇dev settings



選擇最後一個，debug serve，ip地址是你本機的ip,本地連接，ipconfig均可以查看，端口號爲：8081



點擊ok,回到空白頁面，發現是個空白頁面，再次點擊菜單，選擇reload js



終於出來了期待已久的頁面，真是費勁