ReactNative 是由 Facebook 基于 React.js 开发的一套跨平台开发框架。
相信看到这篇文章的人对 ReactNative 已经有过一些了解，这里不作过多赘述。
本文主要基于 ReactNative 打离线包这件事进行详解。
离线包
离线包就是把 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
以上为官方给出的解释，我们来对应的翻译下每条参数的含义。
react-native bundle [参数]
构建 js 离线包
Options:
-h, --help 输出如何使用的信息
--entry-file <path> RN入口文件的路径, 绝对路径或相对路径
--platform [string] ios 或 andorid
--transformer [string] Specify a custom transformer to be used
--dev [boolean] 如果为false, 警告会不显示并且打出的包的大小会变小
--prepack 当通过时, 打包输出将使用Prepack格式化
--bridge-config [string] 使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json
--bundle-output <string> 打包后的文件输出目录, 例: /tmp/groups.bundle
--bundle-encoding [string] 打离线包的格式 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.
--sourcemap-output [string] 生成Source Map，但0.14之后不再自动生成source map，需要手动指定这个参数。例: /tmp/groups.map
--assets-dest [string] 打包时图片资源的存储路径
--verbose 显示打包过程
--reset-cache 移除缓存文件
--config [string] 命令行的配置文件路径
看过了以上的翻译，基本对每条参数都有了一定的了解，我们来实际操作下打包的步骤。
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
3.查看执行完打包命令后的结果
Unable to parse cache file. Will clear and continue.
[2017-1-3 16:58:56] <START> Initializing Packager
[2017-1-3 16:58:56] <START> Building in-memory fs for JavaScript
[2017-1-3 16:58:56] <END> Building in-memory fs for JavaScript (74ms)
[2017-1-3 16:58:57] <START> Building Haste Map
[2017-1-3 16:58:57] <END> Building Haste Map (392ms)
[2017-1-3 16:58:57] <END> Initializing Packager (498ms)
[2017-1-3 16:58:57] <START> Transforming files
[2017-1-3 16:58:57] <END> Transforming files (436ms)
bundle: start
bundle: finish
bundle: Writing bundle output to: ./ios/bundle/index.ios.jsbundle
bundle: Copying 5 asset files
bundle: Done writing bundle output
bundle: Done copying assets
4.将 assets 和 index.ios.jsbundle 引入工程
引入目录后的层级结构
注意: assets 目录导入工程中时，要选择 Create folder references，因为这是图片素材。
5.修改AppDelegate中的代码
NSURL *jsCodeLocation;
// jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
jsCodeLocation = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"index.ios.jsbundle" ofType:nil]];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"RNBundleDemo"
initialProperties:nil
launchOptions:launchOptions];
6.如果要真机测试或打包上传应用, 需要进行如下修改
因为 ReactNative 自带 Chrome 的 Debug 模式, 因此需要修改成 Release ，来关闭掉 Debug 模式
7.打包上传或真机调试，与iOS工程无异。
ReactNative 打离线包中注意事项
打包命令中的路径(文件夹一定要存在)
必须用 Create folder references 的方式引入图片的 assets ，否则引用不到图片
不能用 main.jsbundle 来命名打包后的文件，否则会出现问题
参考文章
https://segmentfault.com/a/1190000004189538
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
http://402v.com/react-nativeru-men-shi-li-jiao-cheng-xiang-mu-da-bao-fa-bu/
https://nodejs.org/api/buffer.html#buffer_buffer
http://reactnative.cn/docs/0.39/running-on-device-ios.html#content
