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等

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM