最近的项目中要做身份认证，其中就包括人脸识别，用的第三方sdk是同盾的,这个是企业谈好的，咱们也只能去按照文档，一步一步去集成，其实也不难，总结起来就是： 在原生中写个方法给RN调用，这个方法就是跳转官网写好的activity，然后识别成功在回调里，把获取的base64图片发消息给RN，RN这边通过监听获得，原生发来的消息。 emmm ，很简单吧。
看下效果图：
初始页面
原谅我的脸比较大，相框都放不下
检测成功的activity
总体分两部分：
第一部分 ：sdk的集成
第二部分：Android 和RN 的交互
第一部分：
在工程中导入libs
把demo中的libs文件拷贝到工程APP 目录下
切换到 project可查看到 libs目录，
然后配置libs 生成so文件：
这个是如何把libs生成jniLibs
sourceSets {
main {
jniLibs.srcDirs = ['libs']
}
}
包导入成功之后
拷贝res文件到 src的main下 这里主要是用人脸识别的图片等资源。
res 目录，覆盖到工程项目的同名目录上，一般情况下这两个目录在 project/app/src/main/
然后新建 第三方页面 把sdk的demo的activity拷贝到工程中。
目录如下：
demo中的activity
这里拷贝之后，然后配置 manifests下的 AndroidManifest.xml文件 这里主要是注册 前面的三个activity 还有就是开启 相应的权限
注册activity以及加权限
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<!--同盾添加权限-->
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
<!--开始检测页面-->
<activity android:name="com.tongduntest.cn.tongdun.android.liveness.SampleStartActivity" />
<!--检测页面-->
<activity android:name="com.tongduntest.cn.tongdun.android.liveness.LivenessDetectActivity" />
<!--检测结果页面-->
<activity android:name="com.tongduntest.cn.tongdun.android.liveness.SampleResultActivity" />
这里要注意的是 ：注册activity的时候 一定要写在 application 里
然后更改 proguard 混淆
-dontwarn com.oliveapp.**
-keepattributes InnerClasses
-keep class **.R$* {*;}
到这里 sdk算是集成了，然后我们开始写 android 和RN的交互
第二部分：Android 和RN 的交互
新建一个文件夹 这个文件夹 和MainApplication同级目录，然后名字任意取，记得包名要和名字一致。
image.png
module代码：
package com.tongduntest.tongdun;
/**
* Created by Sean on 2017/3/29.
*/
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.provider.Settings;
import com.facebook.react.bridge.ActivityEventListener;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.oliveapp.face.livenessdetectorsdk.livenessdetector.datatype.LivenessDetectionFrames;
import com.tongduntest.MainActivity;
import com.tongduntest.cn.tongdun.android.liveness.LivenessDetectActivity;
import com.tongduntest.cn.tongdun.android.liveness.SampleResultActivity;
import com.tongduntest.cn.tongdun.android.liveness.view_controller.LivenessDetectionMainActivity;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;
import android.os.Handler;
import android.os.Bundle;
import com.oliveapp.face.livenessdetectorsdk.livenessdetector.datatype.LivenessDetectionFrames;
import com.tongduntest.cn.tongdun.android.liveness.view_controller.LivenessDetectionMainActivity;
public class TongdunModule extends ReactContextBaseJavaModule {
public TongdunModule(ReactApplicationContext reactContext) {
super(reactContext);
}
ReactContextBaseJavaModule getCurrentActivity ;
@Override
public String getName() {
return "tongdun"; //暴露给RN 的模块调用
}
@ReactMethod
public void startTongdun(){ //跳转人脸识别activity
//这里 我们跳转activity的时候 要这样写 注意路径不要错
Activity currentActivity = getCurrentActivity();
Intent intent = new Intent(currentActivity, com.tongduntest.cn.tongdun.android.liveness.SampleStartActivity.class);
currentActivity.startActivity(intent);
}
}
ReactPackage代码：
package com.tongduntest.tongdun;
/**
* Created by Sean on 2017/3/29.
*/
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.tongduntest.tongdun.TongdunModule;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class TongdunReactPackage implements ReactPackage {
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<NativeModule> createNativeModules(
ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new TongdunModule(reactContext));
return modules;
}
}
到这里之后 然后就是到 MainApplication中实例化一下。（记得导包）
image.png
然后测试了下 RN 这边已经能够打开 人脸识别：不过进入的时候会出现闪退，这时候要改下 build.gradle文件
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
testCompile 'junit:junit:4.12'
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
}
buildTypes {
release {
minifyEnabled false //minifyEnabled主要用来控制是否运行混淆的。
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
更改过之后 重新rebuild 跑起来了
最后就是 写成功后的回调 把 抓取到的图片给 RN ，告诉RN 成功或失败了
在回调方法里写：
新建一个交互类：
/**
* @param reactContext
* @param eventName 事件名
* @param params 传惨
*/
public void senMsgToRN(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}
然后发消息给RN
//发消息给RN 成功
//定义上下文对象
MainApplication mainApplication = (MainApplication)getApplication();
ReactContext reactContext = mainApplication.mReactNativeHost.getReactInstanceManager().getCurrentReactContext();
WritableMap writableMap = new WritableNativeMap();
writableMap.putString("key", "success");
writableMap.putString("base64Data", base64Data);
senMsgToRN(reactContext, "EventName", writableMap);
注意： 如果这个 mReactNativeHost 方法报红的话 把 MainApplication中的这个私有的方法改成public
image.png
很简单吧，到这里
Android 端集成 给RN发消息也写好了，接下来就是js这边的监听，
componentWillMount() {
Platform.OS === "android" ?
DeviceEventEmitter.addListener('EventName', function (msg) {
console.log("androidmsg:" + JSON.stringify(msg));
})
: null
}
调用原生模块
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => {
NativeModules.tongdun.startTongdun()
}}>
<Text style={styles.welcome}>
go to tongdun
</Text>
</TouchableOpacity>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
控制台打印如下：
image.png
image.png
这样获得base64图片字符串后 接下来的事情就交给RN 进行https post请求 进行人像对比了。
最后成功之后不要忘记销毁activity 方法： finish() 关闭当前页面。
ios集成请参考react native 集成人脸识别 --ios
