第一步：导出js bundle包和图片资源：供打包离线使用
我们需要将JS部分的代码和图片资源等打包导出，然后通过XCode将其添加到iOS项目中。
导出js bundle的命令
在执行打包命令之前，我们需要先确保在我们项目的根目录有release_ios文件夹，没有的话创建一个。此文件夹与RN项目下的ios与Android文件夹同等级。
然后RN项目的根目录下执行下面的命令
第一种:
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/
--entry-file ,ios或者android入口的js名称，比如index.js(老版本的RN项目的默认入口文件是index.ios.js)
--platform ,平台名称(ios或者android)
--dev ,设置为false的时候将会对JavaScript代码进行优化处理。
--bundle-output, 生成的jsbundle文件的名称，比如release_ios/main.jsbundle (老版本的RN项目是区分iOS和android的，要改为index.ios.jsbundle)
--assets-dest 图片以及其他资源存放的目录,比如release_ios
第二种：
node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.jsbundle --assets-dest ./ios/bundle
--entry-file ,ios或者android入口的js名称，比如index.js(老版本的RN项目的默认入口文件是index.ios.js)
--platform ,平台名称(ios或者android)
--dev ,设置为false的时候将会对JavaScript代码进行优化处理。
--bundle-output, 生成的jsbundle文件的名称，比如./ios/bundle/index.jsbundle (老版本的RN项目是区分iOS和android的，要改为index.ios.jsbundle)
--assets-dest 图片以及其他资源存放的目录,比如./ios/bundle
以上两条命令各一条命令执行完之后，会在release_ios文件夹下生成assets文件夹与main.jsbundle文件
其中，assets为项目中的JS部分所用到的图片资源(不包括原生模块中的图片资源)，main.jsbundle是JS部分的代码。
第二步：将js bundle包和图片资源导入到iOS项目中
这一步我们需要用到XCode，选择assets文件夹与main.jsbundle文件将其拖拽到XCode的项目导航面板中即可。如下图所示
注：托文件的时候勾选第一与第三个勾选框，此步骤很重要，如下图所示，使添加的文件夹为蓝色
![]()
1597281458868.jpg
然后，修改AppDelegate.m文件，添加如下代码
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
//jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
+jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
...
return YES;
}
上述代码的作用是让React Native去使用我们刚才导入的jsbundle，这样以来我们就摆脱了对本地nodejs服务器的依赖。
React Native Android打包详解React Native Android打包，此处参考别人的
