標籤:debug rn打包 react
最近被自動化組的妹子追要索要 ReactNative 的Debug版的安裝包進行自動化測試,啥??debug版包?
沒聽過啊,好吧。。。。
之前一直以為debug調試只需要把手機用usb串連到電腦上然後執行命令:react-native run-android調試就好,哪曉得還有這小東西,既然要搞那就開始研究吧!
一. ReactNative打包APK(android版本)
官方的react native打包APK的情參考官方文檔:
http://reactnative.cn/docs/0.49/signed-apk-android.html#content
官方打包的基本步驟分為這幾步驟:
首先要安裝萬惡的Android SDK,這個可是需要科學上網的(就是翻牆)哦!
1.產生一個簽名密鑰檔案(一個app僅產生一次)2.設定gradle變數(把第一步產生的簽名檔案放到工程下並配置gradle資訊)3.添加簽名到項目的gradle設定檔4.產生發行APK包(在工程的android目錄下執行命令:./gradlew assembleRelease)
執行完第4步,就可以產生出發行包了如:
650) this.width=650;" src="https://s4.51cto.com/wyfs02/M01/A7/14/wKioL1ngWvTCFkXkAAGdQdXX2n0140.jpg-wh_500x0-wm_3-wmp_4-s_1668882417.jpg" title="blogN1.jpg" width="300" height="361" border="0" hspace="0" vspace="0" style="width:300px;height:361px;" alt="wKioL1ngWvTCFkXkAAGdQdXX2n0140.jpg-wh_50" />
二. ReactNative開發debug真機調試
詳情請參考文檔:http://reactnative.cn/docs/0.49/running-on-device-android.html#content
譯註:在真機上運行時可能會遇到白屏的情況,請找到並開啟懸浮窗許可權
。比如miui系統的設定在此處。
1.首先把手機與電腦進行串連,彈出圖A,然後點擊彈出的USB選項,選擇“傳輸檔案(MTP)” B:
圖A:650) this.width=650;" src="https://s2.51cto.com/wyfs02/M02/08/5E/wKiom1ngYF2C2OoQAALu6c_ulHU821.jpg-wh_500x0-wm_3-wmp_4-s_441432805.jpg" title="blogN2.jpg" width="213" height="380" border="0" hspace="0" vspace="0" style="width:213px;height:380px;" alt="wKiom1ngYF2C2OoQAALu6c_ulHU821.jpg-wh_50" /> 圖B:650) this.width=650;" src="https://s3.51cto.com/wyfs02/M00/A7/14/wKioL1ngXgLCxDpGAAGeB5eJ4eI365.jpg-wh_500x0-wm_3-wmp_4-s_4282731007.jpg" title="BlogN3.jpg" width="226" height="310" border="0" hspace="0" vspace="0" style="width:226px;height:310px;" alt="wKioL1ngXgLCxDpGAAGeB5eJ4eI365.jpg-wh_50" />
2. 手機串連成功後,把控制台目錄切換到android目錄下,執行命令:react-native run-android
命令執行會開啟一個後台視窗(自動開啟一個server,咱們給這個視窗起名myDog吧),同時會在你的手機上安裝debug版本的安裝包,安裝完成後即可進行調試.......
大彩蛋:
650) this.width=650;" src="https://s4.51cto.com/wyfs02/M00/A7/14/wKioL1ngYXmAQk_VAAF--8xPFtE475.png-wh_500x0-wm_3-wmp_4-s_2019336898.png" title="blogN4.png" width="168" height="300" border="0" hspace="0" vspace="0" style="width:168px;height:300px;" alt="wKioL1ngYXmAQk_VAAF--8xPFtE475.png-wh_50" />
安裝完後你搖一搖你的手機會有神奇的效果,當然,要查看控制台的console輸出,在這個神奇效果頁面上點擊"Debug JS Remontely", 會自動開啟瀏覽器,按照瀏覽器上的提示操作即可看到控制台資訊。
三. ReactNative打debug版本的APK安裝包
打debug版本的安裝包,與 第二步驟基本相似。
debug調試需要串連電腦開啟一個server,就是第二步驟上自動開啟的那個視窗myDog,如果做成安裝包的話,需要手動產生一個bundle檔案,這樣就不再需要開啟這個server視窗了(要打成包的話,上哪兒弄這個視窗啊),如下命令產生bundle檔案:
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
請在android的父目錄下執行該命令(請配置好自己的... /.../src/main/assets/... 目錄和..../src/main/res)我的目錄如下:
650) this.width=650;" src="https://s1.51cto.com/wyfs02/M02/A7/16/wKioL1ngbayCMoY0AAIR-uzzn3U832.jpg-wh_500x0-wm_3-wmp_4-s_1075397509.jpg" title="b1.jpg" width="262" height="380" border="0" hspace="0" vspace="0" style="width:262px;height:380px;" alt="wKioL1ngbayCMoY0AAIR-uzzn3U832.jpg-wh_50" />
執行完畢上面的命令後,會產生2類東西,一個是bundle檔案,另一個是所有的被重新命名的靜態圖片,新名稱就是靜態圖片的存放路徑,如下2個圖:
650) this.width=650;" src="https://s2.51cto.com/wyfs02/M01/A7/16/wKioL1ngahrxBeHgAAPVUg4Vsek678.jpg-wh_500x0-wm_3-wmp_4-s_641573612.jpg" title="blogXTP.jpg" width="243" height="380" border="0" hspace="0" vspace="0" style="width:243px;height:380px;" alt="wKioL1ngahrxBeHgAAPVUg4Vsek678.jpg-wh_50" />
上面的紅色檔案是bundle檔案、下面的紅色檔案是對圖片打包。
注意:
產生的圖片可能不在drawable-xxxhdpi目錄下,可能在drawable-hdpi或者drawable-mdpi目錄下,此時需要手動的拷貝這些圖片到drawable-xxxhdpi目錄下。
我的靜態圖片的存放路徑是:
650) this.width=650;" src="https://s4.51cto.com/wyfs02/M01/08/5F/wKiom1ngbM_wwNUkAAIoX0JQmMo247.jpg-wh_500x0-wm_3-wmp_4-s_515377509.jpg" style="width:232px;height:380px;" title="blogTPLJ.jpg" width="232" height="380" border="0" hspace="0" vspace="0" alt="wKiom1ngbM_wwNUkAAIoX0JQmMo247.jpg-wh_50" />
正確的執行完命令,並且產生bundle檔案、圖片檔案後,再次把手機與電腦串連執行【第二步驟】,執行完在手機上安裝app的同時,也會產生一個app-debug.apk的包,這就是我們期待已久的debug安裝包,
好了終於可以向妹子交差了!
650) this.width=650;" src="https://s3.51cto.com/wyfs02/M00/A7/17/wKioL1ngcD2CKyiLAAEkB9-QlS0623.jpg-wh_500x0-wm_3-wmp_4-s_3838156480.jpg" title="bend.jpg" width="391" height="340" border="0" hspace="0" vspace="0" style="width:391px;height:340px;" alt="wKioL1ngcD2CKyiLAAEkB9-QlS0623.jpg-wh_50" />
本文出自 “大棕熊IT” 部落格,請務必保留此出處http://mamadu.blog.51cto.com/2662137/1972115
reactNative如何打Debug版安裝包(android)