离线包就是把 ReactNative 和你写的 js文件、图片等资源都打包放入 App ，不需要走网络下载。
ReactNative 打包命令说明
使用 react-native bundle --help 来查看打包的具体参数
react-native bundle [options]
builds the javascript bundle for offline use
Options:
-h, --help output usage information
--entry-file <path> Path to the root JS file, either absolute or relative to JS root
--platform [string] Either "ios" or "android" --transformer [string] Specify a custom transformer to be used
--dev [boolean] If false, warnings are disabled and the bundle is minified
--prepack When passed, the output bundle will use the Prepack format.
--bridge-config [string] File name of a a JSON export of __fbBatchedBridgeConfig. Used by Prepack. Ex. ./bridgeconfig.json
--bundle-output <string> File name where to store the resulting bundle, ex. /tmp/groups.bundle
--bundle-encoding [string] Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer).
--sourcemap-output [string] File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map
--assets-dest [string] Directory name where to store assets referenced in the bundle
--verbose Enables logging
--reset-cache Removes cached files
--config [string] Path to the CLI configuration file
看过了以上的翻译，基本对每条参数都有了一定的了解，我们来实际操作下打包的步骤。
ReactNative 打离线包流程 (举例iOS)
首先你得有个 ReactNative 的工程。这里以空工程打包为例:
1.创建新工程
react-native init RNBundleDemo
2.执行打包命令(自己看情况需不需要打包图片,二选一)
react-native bundle --entry-file index.ios.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
react-native bundle —entry-file index.ios.js —bundle-output ./ios/bundle/index.ios.jsbundle —platform ios —dev false
3.查看执行完打包命令后的结果
图.png
图.png
打包完成后, 目录结构
4.将 assets 和 index.ios.jsbundle 引入工程
目录.png
引入目录后的层级结构
注意: assets 目录导入工程中时，要选择 Create folder references，因为这是图片素材。
5.修改AppDelegate中的代码
项目中添加代码4.png
6.如果要真机测试或打包上传应用, 需要进行如下修改
因为 ReactNative 自带 Chrome 的 Debug 模式, 因此需要修改成 Release ，来关闭掉 Debug 模式
模式.png
修改工程的编译模式
7.打包上传或真机调试，与iOS工程无异。
ReactNative 打离线包中注意事项
打包命令中的路径(文件夹一定要存在)
必须用 Create folder references** 的方式引入图片的 assets ，否则引用不到图片
不能用 main.jsbundle 来命名打包后的文件，否则会出现问题
