ReactNative 原生混合开发打包ipa和apk

ReactNative 集成原生项目，打包ipa和apk过程记录分析。

本文章默认会iOS 和安卓常规打包，只介绍打包RN这步。
 

过程总览

---

1. 将开发JS部分打成离线Bundle供原生调用
2. iOS 更改入口路径（安卓则配置即可）

具体见下面iOS和安卓分别打包详细过程。

 

iOS打包ipa过程

---

1、在你的RN项目里新建一个输出文件夹，如下图名称可以自定义。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190727122615259.png

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正常步骤打包即可$

$注意:用真机测试离线包$

 

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$

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正常步骤打包即可$