先說說整個環(huán)境搭建的過程。上周開始要在windows上搭建react-native for android環(huán)境，當時按照找的教程，從git上clone master分支的代碼，然后下載了node，安裝react-native框架還是很順利的。

導入到android studio上就無法構建，找找了找原因沒有解決，折騰了1天沒解決，在這之后也遇到很多問題，搭建過程還是比較曲折的，折騰了好幾天才弄好。下面是我的詳細安裝過程。

• 搭建環(huán)境前的準備
• 開始安裝react-native
• 創(chuàng)建react-native項目
• 運行react-native項目

搭建環(huán)境前的準備

• JDK1.7+
• Android SDK
• Git
• Nodejs4.0+

開始安裝react-native

JDK安裝，注意要配置環(huán)境變量，這里就不細說了。

注意一下，Git是必須安裝的。因為后面需要通過Git來執(zhí)行一些命令。比如：windows下dev server目前是不會自動運行的，需要執(zhí)行react-native start啟動，

Windows上安裝Git for Windows。在安裝過程中，請務必記得勾選Run Git from Windows Command Prompt，

這樣會把Git的可執(zhí)行程序加入到PATH環(huán)境變量中，這樣其他程序才能在命令行中正確調用Git。

我的Git是以前安裝的，沒有配置環(huán)境變量，比如：

D:\Program Files\Git\bin;D:\Program Files\Git\libexec\git-core;

把這兩個路徑加入到環(huán)境變量Path里就可以正確調用Git

Android SDK的安裝需要最新的安卓6.0的SDK。下載被墻，可以使用騰訊Bugly的鏡像來加速下載。

Git的安裝不說了。

Nodejs的官方源下載有些慢，可以使用淘寶的源。

打開windows的命令行界面使用命令

npm install?-g nrm

nrm可以很方便切換源

nrm安裝好后，可以使用命令

nrm ls

查看源列表

像這樣使用命令

nrm use taobao

就可以切換到淘寶的源。

然后執(zhí)行

npm install -g react-native-cli

安裝react-native-cli，就可以使用react-native命令。

我是使用的最新發(fā)布版本0.17rc版，安裝會下載一些文件，沒有出現(xiàn)什么問題

創(chuàng)建react-native項目

?進入你要放置項目的目錄然后執(zhí)行命令

react-native init RNApp

這樣就會創(chuàng)建一個RNApp的react-native的項目，創(chuàng)建的過程有些慢，回去下載Gradle依賴，創(chuàng)建完目錄會出現(xiàn)如下目錄結構

運行react-native項目

然后我就把安卓的程序導入android studio(不導入也可以運行，先說說我的過程)，因為之前我本地沒有安卓sdk 23版本，所以編譯運行直接提示錯誤,找不到sdk 23，

然后我就手動的去修改sdk版本為已有的sdk 18版本（不符合react-native運行要求肯定出錯，需要sdk 23版本，也就是安卓6.0 sdk），出現(xiàn)以下錯誤

?這個提示的是build.gradle里錯誤，build.gradle在項目中有兩個，一個是App根目錄下的，另外一個是App下Gradle文件夾下的。好像是android studio自動改變了結構，

這里沒有之前的結構圖，下面是我現(xiàn)在的結構圖

我手動在android studio設置sdk，IDE自動在build.gradle(Project:RNApp)文件里加入了安卓版本等配置，結果就導致錯誤，提示的build.gradle(Project:RNApp)里的。

后面我把sdk 23安裝好了，還是一樣提示錯誤，后來在stackoverflow上找到原因了，

In your top level?build.gradle?you seem to have the code

android

{

　　compileSdkVersion 19

　　buildToolsVersion "19.1"

}

You can't have this code at the top level?build.gradle?because the android build plugin isn't loaded just yet.

You can define the compile version and build tools version in the app level?build.gradle

就是說在build.gradle(Project:RNApp)里規(guī)定sdk版本也不會起作用，需要刪除這里的sdk版本配置，build.gradle(Module:App)里面本來就有sdk配置

刪除后程序終于可以編譯了。

現(xiàn)在說說不用android studio直接用命令運行react-native程序，在工程目錄下運行命令

react-native run-android

至此，應該能看到APP運行，并報錯 Unable to download JS bundle（android studio里運行也一樣）

這個是由于windows上的工程不會自動啟動dev server

這里引用翻譯的React-Native中文文檔的內容

在Windows平臺上，在你運行react-native run-android之后，packager不會自動啟動。你需要這樣自行啟動它：

#對于React Native版本 < 0.14的 cd MyAwesomeApp node node_modules/react-native/packager/packager.js#對于React Native版本 >= 0.14的 (這個版本移除了packager.js) cd MyAwesomeApp react-native start

如果你碰到了ERROR Watcher took too long to load的報錯，請嘗試將這個文件中的timeout值改得更大一些 (文件的具體路徑是node_modules/react-native/packager/react-packager/src/FileWatcher/index.js)。

運行這個會啟動一個本地8081端口的web服務

我在啟動這服務的時候就遇到了ERROR Watcher took long to load，不用去安裝watchman，按照上面的把超時時間改長就正常了。

如果連接不到dev server的話

Android

對于Android 5.0以上設備，你可以運行adb reverse tcp:8081 tcp:8081來使得你的設備可以訪問到你的電腦。

如果運行了還是不行，你只有把啟動dev server服務再嘗試下，找找問題了，比如8081端口被占用等。

啟動到上圖紅線部分的位置dev server就是啟動成功了，紅線下面的是模擬器或者真機加載成功出現(xiàn)的。

啟動了這服務可能還是那個紅色界面的提示，因為必須要保證開發(fā)PC和模擬器或真機里的安卓系統(tǒng)在同一個局域網才能訪問正常

出現(xiàn)那紅色界面，搖晃設備或按Menu鍵，可以打開調試菜單，點擊Dev Settings，選Debug server host for device，

輸入你開發(fā)機的局域網IP+8081端口，再按back鍵返回，再按Menu鍵，在調試菜單中選擇Reload JS，就應該可以看到運行的結果了。

選擇Debug JS，在安裝了React Developer Tools的情況下，就可以在Chrome下調試應用，但是看不到界面。

參考資料：

http://react-native.cn/docs/getting-started.html

http://www.cnblogs.com/meteoric_cry/p/4874517.html

https://github.com/yipengmu/react-native-android-lession

?

本文地址：http://www.cnblogs.com/ydh2014/p/5075604.html

歡迎加群：182659848 一起討論

轉載于:https://www.cnblogs.com/ydh2014/p/5075604.html

總結

以上是生活随笔為你收集整理的react-native for android windows开发环境搭建详细记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。