react-native for android windows開發環境搭建詳細記錄

先說說整個環境搭建的過程。上週開始要在windows上搭建react-native for android環境，當時按照找的教程，從git上clone master分支的代碼，而後下載了node，安裝react-native框架仍是很順利的。

導入到android studio上就沒法構建，找找了找緣由沒有解決，折騰了1天沒解決，在這以後也遇到不少問題，搭建過程仍是比較曲折的，折騰了好幾天才弄好。下面是個人詳細安裝過程。

• 搭建環境前的準備
• 開始安裝react-native
• 建立react-native項目
• 運行react-native項目

搭建環境前的準備

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

開始安裝react-native

JDK安裝，注意要配置環境變量，這裏就不細說了。

注意一下，Git是必須安裝的。由於後面須要經過Git來執行一些命令。好比：windows下dev server目前是不會自動運行的，須要執行react-native start啓動，

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

這樣會把Git的可執行程序加入到PATH環境變量中，這樣其餘程序才能在命令行中正確調用Git。

個人Git是之前安裝的，沒有配置環境變量，好比：

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

把這兩個路徑加入到環境變量Path裏就能夠正確調用Git

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

Git的安裝不說了。

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

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

npm install -g nrm

nrm能夠很方便切換源

nrm安裝好後，可使用命令

nrm ls

查看源列表

像這樣使用命令

nrm use taobao

就能夠切換到淘寶的源。

而後執行

npm install -g react-native-cli

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

我是使用的最新發布版本0.17rc版，安裝會下載一些文件，沒有出現什麼問題

建立react-native項目

 進入你要放置項目的目錄而後執行命令

react-native init RNApp

這樣就會建立一個RNApp的react-native的項目，建立的過程有些慢，回去下載Gradle依賴，建立完目錄會出現以下目錄結構

運行react-native項目

而後我就把安卓的程序導入android studio(不導入也能夠運行，先說說個人過程)，由於以前我本地沒有安卓sdk 23版本，因此編譯運行直接提示錯誤,找不到sdk 23，

而後我就手動的去修改sdk版本爲已有的sdk 18版本（不符合react-native運行要求確定出錯，須要sdk 23版本，也就是安卓6.0 sdk），出現如下錯誤

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

這裏沒有以前的結構圖，下面是我如今的結構圖

我手動在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)裏規定sdk版本也不會起做用，須要刪除這裏的sdk版本配置，build.gradle(Module:App)裏面原本就有sdk配置

刪除後程序終於能夠編譯了。

如今說說不用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就是啓動成功了，紅線下面的是模擬器或者真機加載成功出現的。

啓動了這服務可能仍是那個紅色界面的提示，由於必需要保證開發PC和模擬器或真機裏的安卓系統在同一個局域網才能訪問正常

出現那紅色界面，搖晃設備或按Menu鍵，能夠打開調試菜單，點擊Dev Settings，選Debug server host for device，

輸入你開發機的局域網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 一塊兒討論