ReactNative 原生混合开发打包ipa和apk
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZY_FlyWay/article/details/97501687
ReactNative 集成原生项目，打包ipa和apk过程记录分析。
本文章默认会iOS 和安卓常规打包，只介绍打包RN这步。
过程总览
- 将开发JS部分打成离线Bundle供原生调用
- iOS 更改入口路径（安卓则配置即可）
具体见下面iOS和安卓分别打包详细过程。
iOS打包ipa过程
1、在你的RN项目里新建一个输出文件夹，如下图名称可以自定义。 
2、用命令生成离线rn包
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/
参数说明：
index.js: 你入口js路径,如不是index.js更改一下。
release_ios: 第一步建的文件夹名称，输出指定文件夹。
执行完之后在release_ios文件夹下面你可以看到:
然后将这两个文件拉到工程。
3.调整入口，然后按照iOS正常打包流程打包即可。
NSURL *invoiceUrl = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
// NSURL *invoiceUrl = [NSURL URLWithString:@"http://10.10.10.86:8081/index.bundle?platform=ios"];
NSString * Authorization = [NSString stringWithFormat:@"%@%@",GolbalUserModel.shared.token_type,GolbalUserModel.shared.access_token];
NSDictionary * initialProperties = @{@"Authorization":Authorization};
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL: invoiceUrl
moduleName: @"AddNewInvoiceMoudle"
initialProperties:initialProperties
launchOptions: nil];
self.view = rootView;修改完成之后,运行验证下，然后按照iOS正常步骤打包即可{\color{green}修改完成之后,运行验证下，然后按照iOS正常步骤打包即可}修改完成之后,运行验证下，然后按照iOS正常步骤打包即可
注意:用真机测试离线包{\color{red}注意:用真机测试离线包}注意:用真机测试离线包
Android Q打包apk过程
安卓打包比iOS简单一步，会自动导出asset，无需自己拖进去。
1、 脚本打包JS代码和资源
react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/
注意:这命令是将入库js打包到bundle,图片资源直接塞到app的res{\color{red}注意:这命令是将入库js打包到bundle,图片资源直接塞到app的res}注意:这命令是将入库js打包到bundle,图片资源直接塞到app的res
2、其实完成上一步，就成功了。但是还是要知道这个包是在哪运行的。
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setCurrentActivity(this)
//这个就是离线js包路径
.setBundleAssetName("index.android.bundle")
.setJSMainModulePath("index")
.addPackage(new MainReactPackage())
.addPackage(new AndroidPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 注意这里的MyReactNativeApp必须对应“index.js”中的
// “AppRegistry.registerComponent()”的第一个参数
Bundle initialProperties = new Bundle();
String authorization = "Bearer " + UserInfoManager.getInstance().getLoginUserObject().getToken();
initialProperties.putString("Authorization",authorization);
mReactRootView.startReactApplication(mReactInstanceManager, "AddNewInvoiceMoudle", initialProperties);
llContainer.addView(mReactRootView);初始化的时候会有两个参数： setBundleAssetName和setJSMainModulePath。
setBundleAssetName就是我们打的离线包，setJSMainModulePath就是调试时候第一页面地址。 这两个都填上的话，先找setJSMainModulePath如果本地连上RN服务器先找这个，找不到运行离线包。
真机如果不设置默认连不上本地调试，先走离线包。
修改完成之后,运行验证下，然后按照AndroidQ正常步骤打包即可{\color{green}修改完成之后,运行验证下，然后按照Android Q正常步骤打包即可}修改完成之后,运行验证下，然后按照AndroidQ正常步骤打包即可