找了很多的資料,react native 的資料本來就少,結果關于 android 的更少,與項目啟動有關的就少之又少了,所以我要趕緊記錄下來,以免忘記。
項目創建完成后,用自己喜歡的編輯器打開,我喜歡用的編輯器是 webstorm,
簡單明了,有一個 tests 文件夾,一個 android 文件夾,毋庸置疑,是 android 用的,一個 ios 文件夾,是 ios 用的,還有 index.android.js 和 index.ios.js ,android 和 iOS 的啟動程序都是寫在這里的。
下面就是如何啟動項目了。
親測,iOS 啟動很簡單,在 ios 文件夾下 有 reactNativeProject.xcodeproj 該文件夾用Xcode 打開,沒有 Xcode 就先趕緊去安裝吧, 就在 App store 中就有,下載起來頗費時間。
xcode 啟動起來了,這個時候電腦已經卡爆了!!!
這個地方是可以選擇機型的,我選擇的是 iphone7,run 起來后,帶著手機的這個東西就會出現:
剛開始啟動起來時,虛擬機簡直巨大無比,后來找了半天調節的地方。在虛擬機的 window下面,我選擇的是 50%, 這個時候整個大小就是手機一般了。
手機出來后,滑動手機找到我們的項目程序軟件,點擊打開。
雖然啟動的很慢,但最終還是打開了。
相對于 iOS, android 的就坑爹的多了。
android 的打開方式有很多種, 一種是命令行,把手機連在電腦上,并打開 USB 調試模式,在終端進入該項目, react-native run-android 就可以了,但是我的跑了半天,終端做了很多動作,最后竟然告訴我未啟動,而我也不明原因,搗鼓了好久也沒反應。在我都快放棄的時候,靈光乍現,既然 ios 的就可以用 Xcode 打開,那 android 的是否就能用 android studio 打開呢,結果一試,還真是這樣。
用 android studio 打開 android 文件夾,然后 run 就可以了。
但是 android 坑多,我現在總結的是我遇到的問題。
首先是啟動不起來,android studio 控制臺報錯: 反正原因是支持的最小版本不統一。然后我找了半天,發現在 AndroidManifest.xml 中和在 build.gradle (這里有兩個build.gradle,但是只有一個里面有最小版本的限制)中,最小版本限制不統一,一個是14,一個是16,最后我都改成了16,Rebuild 了一下項目,再次跑起來時就沒有報錯了。
但是這并沒有結束,手機打開程序之后,顯示空白。這里需到手機里修改權限設置,將懸浮窗權限放開,每個品牌的手機打開權限方法都不同,所以這里就不羅列了。
再次打開軟件,火紅的界面,明顯在報錯嘛!
找了半天,網上也有解決辦法,不過命令行的那個對我不起作用,而是在 package.json 中修改了scripts 中的代碼,最后修改后的如下:
"scripts":?{
"build":"(cd?android/?&&?./gradlew?assembleDebug)",
"start":"node?node_modules/react-native/local-cli/cli.js?start",
"test":"jest",
"bundle-android":"react-native?bundle?--platform?android?--dev?false?--entry-file?index.android.js?--bundle-output?android/app/src/main/assets/index.android.bundle?--sourcemap-output?android/app/src/main/assets/index.android.map?--assets-dest?android/app/src/main/res/"
},
再次重啟軟件,為了保險,我先 rebuild 了一下,這次終于正常啟動了。
界面和 ios 的一樣。
還有一點需要注意,react-native 記得跑起來。
辦法很簡單:cd 進項目包
react-native start ?就可以了。