坑很多,跳之前做好准備。沒有VPN的同學請瀏覽完本文后慎行。
你需要先安裝最新版本的node.js(我最后使用的是v4.1.2),前往官網下載>>
注:我win7已經安裝過Visual Studio 2013和Android開發環境(也踩了不少坑,后面有截圖)
為了方便切換npm源,需要先安裝nrm模塊

因為公司內把taobao全線屏蔽了,所以我用了cnpm的鏡像

因為我之前電腦里安裝了node的v0.12.7版本,所以我遇到了下面的坑


如果你也跟我一樣啟動的時候報錯了,那么你需要升級node.js,直接到官網下載並安裝,安裝路徑覆蓋現有安裝目錄即可。官網上也提到node的最低版本要求
https://github.com/facebook/react-native
![]()
更新完node后

一切正常了,你可以在瀏覽器里訪問:http://localhost:8081/index.android.bundle?platform=android
保留packager的dos窗口,新建另外一個dos窗口,切換至項目目錄下:react-native run-android



報錯了,你需要設置ANDROID_HOME的環境變量,跟JAVA_HOME類似的,這里直接略過了…


遇到這個錯誤,我是被坑了很久,說下過程。我嘗試下載並安裝Android Studio。 啟動Android Studio后報錯了

如果你也遇到此問題,可以參考這里解決:http://stackoverflow.com/questions/30044635/android-studio-v1-2-0-start-up-error-java-lang-nullpointerexception
最后啟動Android Studio后,打開SDK Manager,設置鏡像后,下載安裝指定的SDK,參數下面這篇文章:
在Windows下搭建React Native開發環境 http://my.oschina.net/jackzlz/blog/508210
騰訊Bugly加速 http://android-mirror.bugly.qq.com:8080/include/usage.html
一切就緒,再次運行時遇到了這個問題

此時你需要開啟VPN,靜靜等待好消息吧…

我連接的是真機,apk安裝好之后,此時可能會遇到錯誤。我遇到的錯誤與這篇文章一樣:http://www.cnblogs.com/unofficial/p/4843734.html

選擇 Dev Settings,然后輸入本機的IP地址


按上面文章的操作處理后,如果一直連不上,用PC上的瀏覽器訪問一下地址http://localhost:8081/index.android.bundle?platform=android,瀏覽器能正常訪問但手機訪問時在packager的DOS窗口沒有看到log輸出,那么你可以嘗試使用下面的命令:

參考網址:http://stackoverflow.com/questions/32572399/react-native-android-failed-to-load-js-bundle
最后的最后,期待已久的界面出來了。

修改文字,然后重新載入JS,應用不需要重啟,效果如下:

總體來說,按照網上的資料你是能一步一步解決問題的。我遇到的問題跟我之前安裝的環境有問題,所以導致了一些問題,祝諸君都能順利看到Welcome to React Native!界面
主要的幾個命令:
1、初始化項目 react-native init projectName
2、dos進入項目文件夾之后 react-native start,啟動服務
3、另外開啟一個DOS窗口,啟動應用:react-native run-android
------- update by 2015/11/30
使用最新版本的react-native(0.15.0),因為之前本機已經成功運行過react-native,再次按照上面的幾個命令操作的時候,發現真機運行會報錯:
ReferenceError: Can't find variable: require(line 1 the generated bundle) github上也有鏈接 https://github.com/facebook/react-native/issues/3379
點RELOAD JS按鈕之后就報
Unable to download JS Bundle
PC上訪問:http://localhost:8081/index.android.bundle?platform=android 正常,我就納悶了,折騰了好久:包含升級node.js版本為(結果發現沒用),重新編譯(react-native run-android --refresh-dependencies) adb reverse tcp:8081 tcp:8081 然並卵,錯誤依舊
最后調用真機菜單,把設置重新填了一下,發現OK. Menu -> Dev Settings -> Debug server host & port for device,eg: 192.168.0.xx:port
以前寫node.js相關的文章也遇到很多人發消息或郵件來問,現在寫react-native也有這種勢頭,但是因為我本機之前就已經安裝過Android的開發環境,所以對於從來沒接觸過相關知識的童鞋來講,可能有點疑惑。我貼幾個我本機的環境:
ANDROID_HOME 出錯的提示已經很明確的告知了,它其實就是Android的SDK根目錄,不行你就安裝Android Studio,它里面就幫你下載好了SDK,里面包含SDK Manager和AVD Manager等

