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;
}

4.分析应用启动时和启动后的cpu和内存占用(与RN子bundle数量和大小的关系)

image.png

利用instrument工具分析应用的cpu和内存占用:

image.png

同样功能,拆分为多个子bundle后,对性能较为有利,也方便后续的维护
1大bundle启动.png

1小bundle启动.png

5大bundle启动.png

5小bundle启动.png

1大bundle10s后.png

1小bundle10s后.png

5大bundle10s后.png

5小bundle10s后.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。