React-Native android在windows下的踩坑記

坑很多,跳之前做好準備。沒有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等

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章