離線包就是把RN和你寫(xiě)的js圖片等資源都打包放入app,不需要走網(wǎng)絡(luò)下載。
打包命令說(shuō)明
react-native bundle
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]
ios打包步驟
1、在工程根目錄下執(zhí)行打包命令,比如react-native bundle --entry-file index.ios.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
,請(qǐng)參考上面命令說(shuō)明,根據(jù)自己的情況進(jìn)行修改再執(zhí)行。注意要先保證bundle文件夾存在。
2、命令執(zhí)行完生成如下資源
3、在xcode中添加assets【必須用Create folder references的方式,添加完是藍(lán)色文件夾圖標(biāo)】和index.ios.jsbundle,如圖
4、參考官方文檔,修改AppDelegate.m文件,使用OPTION 2處的代碼
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"jsbundle"];
5、一切OK 運(yùn)行模擬器看效果吧
ios打包遇到的問(wèn)題
1、離線包如果開(kāi)啟了chrome調(diào)試,會(huì)訪問(wèn)調(diào)試服務(wù)器,而且會(huì)一直loading出不來(lái)。
2、如果bundle的名字是main.jsbundle,app會(huì)一直讀取舊的,改名就好了。。。非常奇葩的問(wèn)題,我重新刪了app,clean工程都沒(méi)用,就是不能用main.jsbundle這個(gè)名字。
3、必須用Create folder references【藍(lán)色文件夾圖標(biāo)】的方式引入圖片的assets,否則引用不到圖片
4、執(zhí)行bundle命令之前,要保證相關(guān)的文件夾都存在
參考:
https://github.com/facebook/react-native/issues/4084
http://www.lxweimin.com/p/5bdce8da4d88