在 Native 项目中接入 QRN

iOS大客户端中使用

  • Podfile中引入ReactNativeLib依赖:
   pod 'ReactNativeLib', '~> 0.beta'

ReactNativeLib 依赖 QRNLib,会自动安装 QRNLib,如果需要指定 QRNLib 的版本请手动在 Podfile 文件中添加 QRNLib 依赖。

  • 使用以下代码来打开一个 QRN 页面:
#import "QRCTVCCreater+CommonClient.h"
// ...
//在主线程调用
[QRCTVCCreater createVCWithHybridId:hybridId  // 业务的 hybridId
                         moduleName:module    // 业务的 module name
                  initialProperties:initProps // 传入的初始属性
                  completionHandler:^(QRCTViewController *qrctVC, NSError *error) {
                      //回调为主线程
                      if (error) {
                          // handle error
                          return;
                      }
                      [VCController pushVC:qrctVC WithAnimation:nil];
                  }];

或者也可以使用以下方法传入所需要的参数来初始化一个 QRN 页面:

#import "QRCTVCCreater+CommonClient.h"
// ...
//在主线程调用
[QRCTVCCreater createVCWithHybridId:hybridId
                  moduleName:moduleName
           initialProperties:initialProperties
                      vcName:vcName             // 指定创建的 vcName
                  hasLoading:YES                // 是否需要加载的小菊花
           completionHandler:^(QRCTViewController *qrctVC, NSError *error) {
                      //回调为主线程
                      if (error) {
                          // handle error
                          return;
                      }
                      [VCController pushVC:qrctVC WithAnimation:nil];
                  }];
#import "QRCTVCCreater+CommonClient.h"
// ...
//在主线程调用
[QRCTVCCreater createVCWithHybridId:hybridId
                  moduleName:moduleName         
           initialProperties:initialProperties
                      vcName:vcName             // 指定创建的 vcName
           completionHandler:^(QRCTViewController *qrctVC, NSError *error) {
                      //回调为主线程
                      if (error) {
                          // handle error
                          return;
                      }
                      [VCController pushVC:qrctVC WithAnimation:nil];
                  }];
#import "QRCTVCCreater+CommonClient.h"
// ...
//在主线程调用
[QRCTVCCreater createVCWithHybridId:hybridId
                         moduleName:moduleName
                  initialProperties:initialProperties
                  completionHandler:^(QRCTViewController *qrctVC, NSError *error) {
                             //回调为主线程
                             if (error) {
                                 // handle error
                                 return;
                             }
                             [VCController pushVC:qrctVC WithAnimation:nil];
                  }];
#import "QRCTVCCreater+CommonClient.h"
// ...
//在主线程调用
[QRCTVCCreater createVCWithHybridId:hybridId
                         moduleName:moduleName
                  initialProperties:initialProperties
                           delegate:self];
  • 如果仅是想要在已有的 Native 页面中嵌入一个 QRN 界面,则可使用QRCTViewCreater
#import "QRCTViewCreater.h"
//  ...
//在主线程调用
[QRCTViewCreater createViewWithHybridId:hybridId    // 业务的 hybridId
                               moduleName:module    // 业务的 module name
                        initialProperties:initProps // 传入的初始属性
                               hasLoading:YES       // 是否需要加载的小菊花
                        completionHandler:^(RCTRootView *rootView, NSError *error) {
                            //回调为主线程
                            if (error) {
                                // handle error
                                return;
                            }
                            [theMainView addSubview:rootView];
                        }];

Bridge

QRN 会对 RCTBridge 进行缓存和复用的管理,因此不要去自己操作 bridge ,如果需要给自己业务的 bridge 发送消息可以使用QRCTEventSender

//可以在任意的线程调用
[QRCTEventSender sendToHybridId:@"hybridId"     //RN业务hybridId
                      eventName:@"JSEventName"  //JSEventName
                       withData:data];          //发送的数据

JS如果需要监听该广播,使用下面的方法:

RCTDeviceEventEmitter.addListener(JSEventName, (data) => {
  //Do something  
});

iOS 独立客户端使用

  • Podfile中引入QRNLib依赖:
   pod 'QRNLib', '~> 0.beta'
  • 初始化 QRN 配置

通过 [QRCTConfigManager setDelegate:delegate]; 设置代理, 实现 QRCTConfigManagerDelegate 的代理方法完成 QRN 配置。

@protocol QRCTConfigManagerDelegate <NSObject>

@required

//appInfos的信息,用于 DeviceInfo 返回的信息
- (NSDictionary<NSString *, NSString *> *)appInfos;

//对应该hybridId业务的业务包URL
- (NSURL *)bundleURL:(NSString *)hybridId;



@optional

//beta环境中hybridId业务branch分支的业务包URL,用来测试某业务不同开发分支的页面
- (NSURL *)betaBundleURL:(NSString *)hybridId branch:(NSString *)branch;

//处理 QRN 相关的异常,包含了 JS 异常等
- (void) handQRCTFatal:(NSError *)error hybridId:(NSString *)hybridId;

//JS 调用的 sendScheme 实现,其中 callBack 用来回调 JS 数据
- (void) sendScheme:(NSURL *)url data:(NSDictionary *)data callBack:(RCTResponseSenderBlock)callBack;

@end
  • 创建页面的方式如下:
#import "QRCTVCCreater.h"
// ...
//在主线程调用
[QRCTVCCreater createVCWithHybridId:hybridId  // 业务的 hybridId
                         moduleName:module    // 业务的 module name
                  initialProperties:initProps // 传入的初始属性
                         hasLoading:YES       // 是否需要加载的小菊花
                  completionHandler:^(QRCTViewController *qrctVC, NSError *error) {
                      //回调为主线程
                      if (error) {
                          // handle error
                          return;
                      }
                      [VCController pushVC:qrctVC WithAnimation:nil];
                  }];

更多详细独立客户端接入Demo可以点击查看