react native 集成人脸识别 --ios

上一篇介绍了 android 端的集成
这篇介绍下ios的集成.
整体思路和android类似：ios原生这边集成sdk后，写个ios和RN的交互类，暴露给RN ，RN再调用跳转人脸识别页。成功，或失败内部sdk中有回调，通过ios这边监听的触发通知RN 成功或失败。

image.png

1.sdk的集成。
2.ios和RN的交互

sdk的集成：
按照文档,把sdk 拷贝到工程目录，然后add files 到工程中。

image.png

按文档要求配置，导入相关的资源文件，架包等,新版的Xcode 在我们导入sdk的时候回自动添加这些相关资源。
集成之后就是 ios原生这边写方法跳转到这个人脸识别页面，然后把这个方法暴露给RN 去调用。

2.1这里着重介绍下RN 和 ios的交互。
首先我们在工程中新建一个类如何新建可参考简书中有介绍过ios的.h .m文件

然后.h文件去实现 “RCTBridgeModule”协议的Objective-C类

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>

@interface testRn : NSObject <RCTBridgeModule>

@end

.m文件官网是这样说的：为了实现RCTBridgeModule协议，你的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定，默认就会使用这个Objective-C类的名字。

@implementation testRn

RCT_EXPORT_MODULE(test);  //这里可以填写 模块的名字 不写的话默认类名
//给Javascript导出的方法   这个方法有几个参数RN 那边调用的时候就传几个参数要不然会报错。用不到传参 也可以不写。
RCT_EXPORT_METHOD(start:(NSString *)name location:(NSString *)location)
{
//这里触发人脸识别跳转  
//具体怎么跳转官方发的sdk的demo都有些，拷贝进来修改下就行了
}
@end

到这里RN 调用原生已经可以了，接下来就是监听识别成功或失败的回调，告诉RN。
2.2这里就叫ios给RN 发消息吧：

首先我们同样建一个交互类，名字可以随便取，便于理解就行。

image.png

.h文件

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
#import <React/RCTBridge.h>
#import <React/RCTEventEmitter.h>

@interface EventEmitterManager : RCTEventEmitter <RCTBridgeModule>

.m文件

#import "EventEmitterManager.h"

@interface EventEmitterManager()

@end
NSString *const kEventEmitterManagerEvent  = @"EventEmitterManagerEvent";

@implementation EventEmitterManager


- (instancetype)init
{
  self = [super init];
  if (self) {  //新增监听   有多个监听就写多个 return 的时候返回多个
     [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(notiMethd:) name:@"CallBackMsg" object:nil];
  }
  return self;
}
RCT_EXPORT_MODULE() //把方法导出给RN  没有就默认类名
- (void)notiMethd:(NSNotification *)notiMethd
{
  NSDictionary *resultDic = notiMethd.userInfo;
  NSString *base64Encoded = resultDic[@"base64Encoded"];
   NSString *key = resultDic[@"key"];
  [self sendEventWithName:@"CallBackMsg" body:@{@"base64Encoded":base64Encoded,@"key":key}]; //发消息给RN
}

- (NSArray<NSString *> *)supportedEvents {
  return @[@"CallBackMsg"];    //如果有多个监听  这里加上例如：  return @[@"CallBackMsg",@"CallBackMsg2"]; 
}

@end

其他模块触发监听：

//注意：监听的名字要一致，成功之后不要忘记关闭当前页
 //触发ios监听
  [[NSNotificationCenter defaultCenter] postNotificationName:@"CallBackMsg" object:nil userInfo:@{@"base64Encoded":@"",@"key":@"success"}];
  //关闭当前页面
  [self dismissViewControllerAnimated:YES completion:nil];

ios这边的方法我们已经写好了，下面看下RN 这边如何使用

import {
  Platform,
  NativeEventEmitter,
  NativeModules,
  DeviceEventEmitter,
} from 'react-native';

..........
 componentDidMount() {
     let EventEmitterManager = NativeModules.EventEmitterManager;
      let eventEmitterManagerEmitter = new NativeEventEmitter(
        EventEmitterManager,
      );
      this.reciveIosMsg = eventEmitterManagerEmitter.addListener(
        'CallBackMsg',
        result => {
         if (result.key === 'success' && result.base64Encoded != '') {  
         //做相关成功处理
       }
    })
}
 componentWillUnmount() {//删除监听
    this.reciveIosMsg.remove();
  }

react native 集成人脸识别 --ios

相关推荐