ReactNative學習筆記(三)打包、調試、運行等相關介紹


各種命令

個人習慣在項目根目錄下把一些常見命令寫成bat文件,以后每次要執行什么只需要雙擊即可:

W409xH149

編譯、生成、運行並啟動packager(debug模式):

react-native run-android

所謂packager其實就是一個文件同步服務,默認監聽8081端口,啟動它之后,運行debug模式的ReactNative應用可以隨時reload我們的JS。有時候使用上面的命令之后packager服務沒有自動啟動,此時需要我們手動啟動。

我們還可以直接在AndroidStudio中運行項目,然后手動啟動packager服務即可:

react-native start

W677xH523

當然,如果你的apk已經安裝到了設備上,那么直接啟動packager就可以開始開發了。

生成release包的命令見后面。

bundle文件介紹

bundle文件是一個JS文件的大集合,對於Android平台,就叫index.android.bundle,一般有幾百kb,里面包括你自己寫的JS和RN自帶的一些模塊代碼,是一個文本文件,可以直接用記事本打開。

默認debug模式下,生成的apk里面的index.android.bundle只是ReactNative默認的一個HelloWorld頁面,如果packager正在運行,那么這個apk會連接這個packager提供的服務,將js和其它資源打包成index.android.bundle並加載。所以,如果你的packager服務沒有開啟,可能看到的只是一個默認的HelloWorld頁面。

開啟實時reload和remote debug

debug 模式下的RN應用自帶了一個輔助菜單(雙擊字母R,或者Ctrl+M,或者直接按模擬器上的菜單鍵都可以打開它):

W394xH646

選擇reload,可以手動重新加載js,如果新添加了圖片則需要重新運行apk才可以生效。

選擇Enable Live Reload可以開啟實時文件同步,修改了JS之后可以立即自動生效,無需手動reload;

選擇Debug JS Remotely可以開啟遠程調試,會自動用Chrome打開http://localhost:8081/debugger-ui,然后需要我們手動按下F12打開控制台,在Console面板記得按下圖選擇一下:

W417xH260

在這里執行代碼就會直接作用到RN上,比如alert之后,會在界面彈出提示。

對於Sources面板,我們的JS和圖片等資源在這里全部可以看得到:

W595xH399

要支持斷點調試的話好像還要借助一個插件,這個沒試過。

發行正式包

很多東西需要打正式的release包才能測試,比如熱更新,所以本小節先介紹如何配置打包。

生成簽名文件:

cd android/app
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 36500

按照提示一直下一步,其中,my-key-alias是別名,可隨意指定,記住你設置的密碼,密鑰口令和密鑰庫口令一般都設置相同。執行上述命令后會在android/app下生成my-release-key.keystore文件。

打開android\app\build.gradle文件,在defaultConfig后面追加signingConfigs相關配置,在buildTypes.release中增加signingConfig一行:

defaultConfig {...}
signingConfigs {
    release {
        storeFile file("my-release-key.keystore")
        keyAlias "my-key-alias"
        storePassword "123456"
        keyPassword "123456"
    }
}
splits {...}
buildTypes {
    release {
        ...
        signingConfig signingConfigs.release
    }
}

不清楚的看截圖:

W587xH773

在項目根目錄上新建一個生成release包.bat,以后雙擊即可生成正式包了:

cd android && gradlew assembleRelease

生成並安裝release包.bat:

cd android && gradlew installRelease


免責聲明!

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



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