×

react native 集成人脸识别 --ios

96
JsLin_
2018.07.24 23:49 字数 556

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

image.png

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 发消息吧:

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


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();
  }
相关打印结果

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

React Native Issues
Web note ad 1