reactNative如何打Debug版安裝包(android)

來源:互聯網
上載者:User

標籤: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)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.