windows下面的ReactNative環境搭建以及挖坑

阿新 • • 發佈：2018-12-31

前言：

ReactNative更新很快，它在windows上面的環境搭建有點小麻煩，我也是一步步踩坑走過來。下面文章未必是所有的坑，只是我遇見的一些問題的總結。本教程只是教大家如何使用真機除錯（不包括模擬器），因為本人的筆記本太爛了，開啟模擬器會很卡，所以沒用模擬器。

正文：

1、準備安裝AndroidStudio（包括它的SDK），然後將下載好的sdk配置到環境變數，如果是Android工程師就跳過這一步，AS下載及安裝教程。

配置環境變數（ANDROID_HOME 和platform-tools的環境變數，你可以用ANDROID_HOME 去配置platform-tools，我這裡就沒這麼做了

）

在cmd中輸入 adb devices 可以看到連線的手機和模擬器

2、安裝node.js

3、下載安裝Git，同時也要記得配置環境變數

4、安裝react-native的命令列工具

以前都是直接全域性安裝react-native，但是這個佔用記憶體很大，後來就將react-native中的命令列單獨抽出安裝，也就是react-native-cli。

同樣開啟cmd ，輸入 npm install -g react-native-cli

記得要加上-g，這個就是全域性安裝的意思，如果不加只會裝在本地，命令會找不到。

檢視你裝的react-native-cli版本

檢視react-native總共有哪些版本以及最新的版本，輸入 npm info react-native

如果你想安裝制定版本的react-native的話，可以使用@符號

npm install [email protected]版本號

5、建立react-native專案

假如你想在F:\reactNative下面建立一個react-native專案，專案的名稱為myrn，那麼可以在F:\reactNative這個目錄下開啟cmd輸入命令react-native init myrn

但是問題來了，初始化的時候你會一直卡在哪裡，我試了很多遍，每次都會卡在哪裡，我就會Ctrl+c 去結束任務，然後重新執行命令反覆了很多次都不行，那怎麼辦呢，其實可以使用淘寶映象去下載，init卡死解決方案。

到node安裝目錄下面找到npmrc在檔案末尾加上egistry = https://registry.npm.taobao.org這句話就可以了。
F:\node\node_modules\npm\npmrc

然後再執行react-native init myrn 命令就可以了

6、執行reactNative伺服器

進入專案根目錄（myrn的根目錄），輸入react-native start命令

服務埠預設是8081

如果你的8081埠被專用就會報異常，這個時候你就可以重新制定埠，在cmd中輸入命令

react-native start --port 9999

7、執行安卓專案

連結手機，在cmd中輸入adb devices確保手機連結（最好是Android5.0以上）

進入專案根目錄（myrn的根目錄）另起一個cmd（不要在服務的cmd中輸入此命令），輸入react-native run-android命令

初次執行 react-native run-android 指令的時候會出現gradle下載極慢，一直在卡中。那麼為什麼會卡呢，因為它在下載gradle-2.4-all.jar這個包，如果你不翻牆的話會很慢。其實我們可以自己從網上下載gradle-2.4-all這個包放入C:\Users\yw\.gradle\wrapper\dists\gradle-2.4-all這個資料夾下面。當然你也可以不用gradle-2.4-all.jar這個包，也可以用其它的包，比如我就用了gradle-3.5-all.jar這個包。如果用這個包就要修改相應的配置。

如果一直等待它自己下載完成的話要很久的時間而且還可能下載不完全導致報錯（下面的錯誤就是這個gradle包下載不完全導致無法解壓，遇到這個錯誤就要把這個gradle包刪除重新下載）。

執行的時候我們發現了錯誤，無法推送app到我們的裝置上面，看白色框的資訊，此資訊告訴我們可以配置ANDROID_HOME或者新增一個local.properties檔案解決這個問題。如果你配置了ANDROID_HOME就應該不會再有這個問題，如果你不想配置ANDROID_HOME了，你也可以從AndroidStudio專案中複製一份local.properties檔案放在F:\reactNative\myrn\android目錄下（專案myrn下面的android目錄下面）。