react native 集成人脸识别 --ios

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

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

1. 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 发消息吧：

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

.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(); } 

ok,到这里整个流程成功了。感谢帮助过我的原生大佬飞哥,踩过RN和ios交互坑的 阿木木 。希望这篇文章能对大家有点用吧，少走点弯路.... 同时有错误的地方也可以指出来，谢谢！