React-Native 打離線包 真機調試

0x01 打bundle命令 (iOS Android 通用)

Options:

--entry-file Path to the root JS file, either absolute or relative to JS root [required

--platform Either "ios" or "android"

--transformer Specify a custom transformer to be used (absolute path) [default: "/Users/babytree-mbp13/projects/xcodeProjects/AwesomeProject/node_modules/react-native/packager/transformer.js"]

--dev If false, warnings are disabled and the bundle is minified [default: true]

--prepack If true, the output bundle will use the Prepack format. [default: false]

--bridge-config File name of a a JSON export of __fbBatchedBridgeConfig. Used by Prepack. Ex. ./bridgeconfig.json

--bundle-output File name where to store the resulting bundle, ex. /tmp/groups.bundle [required]

--bundle-encoding Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer).[default: "utf8"]

--sourcemap-output File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map

--assets-dest Directory name where to store assets referenced in the bundle

--verbose Enables logging [default: false]


0x02 Android 打包步驟?

打包步驟

1.在工程根目錄下執行打包命令,比如

react-native bundle --entry-file index.android.js --bundle-output ./android/app/src/main/assets/index.android.jsbundle --platform android --assets-dest ./android/app/src/main/res/ --dev false

注意:[./android/app/src/main/assets/]文件夾存在

2.增量升級的話不要把圖片資源直接打包到res中,腳本如下:

react-native bundle --entry-file index.android.js --bundle-output ./bundle/androidBundle/index.android.jsbundle --platform android --assets-dest ./bundle/androidBundle/ --dev false

3.保證MainActivity.java中的setBundleAssetName與你的jsbundle文件名一致,比如.setBundleAssetName(“index.android.jsbundle”)就與我生成的資源名一致


0x03 iOS 打包步驟

1.在工程根目錄下執行打包命令,比如react-native bundle –entry-file index.ios.js –bundle-output ./bundle/iosBundle/index.ios.jsbundle –platform ios –assets-dest ./bundle/iosBundle –dev false

注意要先保證bundle文件夾存在。

2.在xcode中添加assets【必須用Create folder references的方式,添加完是藍色文件夾圖標】和index.ios.jsbundle

3.參考官方文檔,修改RN頁面入口代碼

?jsCodeLocation = [[NSBundle mainBundle] URLForResource:@”index.ios” ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?withExtension:@”jsbundle”];



0x04 QA

ios打包遇到的問題

1.離線包如果開啟了chrome調試,會訪問調試服務器,而且會一直loading出不來。

2.如果bundle的名字是main.jsbundle,app會一直讀取舊的,改名就好了。。。非常奇葩的問題,我重新刪了app,clean工程都沒用,就是不能用main.jsbundle這個名字。

3.必須用Create folder references【藍色文件夾圖標】的方式引入圖片的assets,否則引用不到圖片

4.執行bundle命令之前,要保證相關的文件夾都存在

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容