本文只是对https://www.jianshu.com/p/bb7c5f1d304e的简单摘抄,方便自己以后查找,如有版权纠葛,发文必改(删)。

所谓离线包即是打包本地文件(图片等),不需要保存在后端。或者针对移动端开发而言,你可以把包分别导入工程,ios端的话是可以的,安卓端没尝试过,仅提供这条思路。

打包命令详情:

使用 react-native bundle --help 来查看打包的具体参数(全是英文,看中文吧)

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] 命令行的配置文件路径
打包流程(ios,安卓好像不需要打离线包):
  1.cd到工程目录
  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.最后导入ios工程,在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];