在开发RN应用的时候，一般情况下我们使用官方提供的开发模式：依赖本地启动的Node服务，加载本地远程jsbundle文件，可以很方便的做到开发实时热更新。但在某些情况下，我们希望脱离本地Node服务的依赖，将jsbundle文件打包到RN应用中，应该如何做呢？

生成jsbundle文件

# 进入项目目录
cd AwesomeProject

mkdir ios/bundle
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/bundle/main.jsbundle --assets-dest ios/bundle

参数说明

  • --entry-file ios或者android入口的js名称，比如index.js
  • --platform 平台名称(ios或者android)
  • --dev 设置为false的时候将会对JavaScript代码进行优化处理。
  • --bundle-output 生成的jsbundle文件的名称，比如./ios/bundle/main.jsbundle
  • --assets-dest 图片以及其他资源存放的目录,比如./ios/bundle

将上命令添加进项目的package.json文件的scripts字段中

{
  ...
  "scripts": {
    "bundle-ios": "react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/bundle/main.jsbundle --assets-dest ios/bundle"
  }
  ...
}

以后打包直接运行npm run bundle-ios

添加资源到Xcode项目

选中Xcode项目，鼠标右键选中Add Files to "AwesomeProject"

点击Add完成。

修改AppDelegate.m文件

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  //return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

重新Build应用