最近的项目中要做身份认证，其中就包括人脸识别，用的第三方sdk是同盾的,这个是企业谈好的，咱们也只能去按照文档，一步一步去集成，其实也不难，总结起来就是： 在原生中写个方法给RN调用，这个方法就是跳转官网写好的activity，然后识别成功在回调里，把获取的base64图片发消息给RN，RN这边通过监听获得，原生发来的消息。 emmm ，很简单吧。

看下效果图：

总体分两部分：

第一部分 ：sdk的集成 第二部分：Android 和RN 的交互

第一部分：

在工程中导入libs 把demo中的libs文件拷贝到工程APP 目录下 切换到 project可查看到 libs目录， 然后配置libs 生成so文件：

sourceSets {        main {            jniLibs.srcDirs = ['libs']        }    }

包导入成功之后

拷贝res文件到 src的main下 这里主要是用人脸识别的图片等资源。 res 目录，覆盖到工程项目的同名目录上，一般情况下这两个目录在 project/app/src/main/ 然后新建 第三方页面 把sdk的demo的activity拷贝到工程中。 目录如下：

这里拷贝之后，然后配置 manifests下的 AndroidManifest.xml文件 这里主要是注册 前面的三个activity 还有就是开启 相应的权限

这里要注意的是 ：注册activity的时候 一定要写在 application 里

然后更改 proguard 混淆

-dontwarn com.oliveapp.**   -keepattributes InnerClasses   -keep class **.R$* {*;}

到这里 sdk算是集成了，然后我们开始写 android 和RN的交互

第二部分：Android 和RN 的交互

新建一个文件夹 这个文件夹 和MainApplication同级目录，然后名字任意取，记得包名要和名字一致。

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
     
      > createJSModules() {        return Collections.emptyList();    }    @Override    public List
      
        createViewManagers(ReactApplicationContext reactContext) {        return Collections.emptyList();    }    @Override    public List
       
         createNativeModules(            ReactApplicationContext reactContext) {        List
        
          modules = new ArrayList<>();        modules.add(new TongdunModule(reactContext));        return modules;    }}
        
       
      
     

到这里之后 然后就是到 MainApplication中实例化一下。（记得导包）

然后测试了下 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

很简单吧，到这里

Android 端集成 给RN发消息也写好了，接下来就是js这边的监听，

componentWillMount() {    Platform.OS === "android" ?      DeviceEventEmitter.addListener('EventName', function (msg) {        console.log("androidmsg:" + JSON.stringify(msg));      })      : null  }

调用原生模块

render() {    return (      
             
      
        {          NativeModules.tongdun.startTongdun()        }}>          
       
                    go  to tongdun        
               
              
      
                 To get started, edit index.android.js        
              
      
                 Double tap R on your keyboard to reload,{'\n'}          Shake or press menu button for dev menu        
            
         );  }

控制台打印如下：

这样获得base64图片字符串后 接下来的事情就交给RN 进行https post请求 进行人像对比了。

最后成功之后不要忘记销毁activity 方法： finish() 关闭当前页面。

ios集成请参考