ios原生工程加载多RN模块并发布

1.加载多个RN子模块

如xcode新建Test原生工程后，需引入RN子模块：

1.1. 首先创建一个空的文件夹。

这个文件夹将会是集成之后项目文件。假设我给他取名： iOS-RN.

1.2. 在 iOS-RN 文件夹中，创建一个/ios文件。

这个/ios文件中将存放原生项目中所有的文件。这直接将原生项目的Test文件复制一份拷贝过来即可。
在ios同级目录下创建一个RNModule的文件夹包括package.json、index.js、App.js、app.json及RN相关的js代码文件
前4个文件可利用初始化RN工程后，直接复制过来，在修改即可

react-native init myFirstRNProject --version 0.59.9

index.js文件是RN的入口文件，可注册多模块时

import React from 'react';
import {AppRegistry} from 'react-native';
import Tools from './app/pages/Tools/Tools';
import ToolsContainer from './app/pages/Tools/ToolsContainer';
import ApprovalContainer from './app/pages/Approval/ApprovalContainer';
import SubscriptionContainer from './app/pages/Subscription/SubscriptionContainer';
import ContactsContainer from './app/pages/Contacts/ContactsContainer';
import MyContainer from './app/pages/My/MyContainer';
// 整体js模块的名称
AppRegistry.registerComponent('Tools', () => ToolsContainer);
AppRegistry.registerComponent('Approval', () => ApprovalContainer);
AppRegistry.registerComponent('Subscription', () => SubscriptionContainer);
AppRegistry.registerComponent('Contacts', () => ContactsContainer);
AppRegistry.registerComponent('My', () => MyContainer);

2.RN文件打成原生支持的bundle

Android：react-native bundle --platform android --dev false --entry-file index.js --bundle-output outputAndroid/index.my.android.bundle --assets-dest outputAndroid/

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

3.向iOS项目中添加我们得到的资源文件

离线包生成后，如果你可以在ios目录下看到outputIOS目录中已经有生成的离线资源文件了，恭喜你已经胜利✌️一半了，由两部分组成：assets文件夹中是项目用到图片文件所在的目录（子目录和你的RN项目中的图片目录一致），.jsbundle文件就是RNjs代码的产出物。

在Xcode中添加资源到项目中，必须使用Create folder references的方式(也就是文件夹的方式，goups和folder区别，这里不详细介绍了)添加bundle文件夹：

image

添加后是这样的，如果你看见outputIOS是蓝色的，就是正确的：

image

胜利前最后一步，修改启动加载文件：

在开发的过程中可以在这里配置Debug Server的地址，当发布上线的时候，就需要使用离线的jsbundle文件，因此需要设置jsCodeLocation为本地的离线jsbundle。

- (void)viewDidLoad {
    [super viewDidLoad];
    NSURL*jsCodeLocation;
#ifdef DEBUG
    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
#else
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"outputIOS/main"withExtension:@"jsbundle"];
#endif
    RCTRootView*rootView =
      [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                  moduleName:@"Approval"
                           initialProperties:nil
                               launchOptions:nil];
    self.view= rootView;
}