最近的項目中要做身份認證，其中就包括人臉識別，用的第三方sdk是同盾的,這個是企業(yè)談好的识椰，咱們也只能去按照文檔，一步一步去集成深碱，其實也不難腹鹉，總結(jié)起來就是： 在原生中寫個方法給RN調(diào)用，這個方法就是跳轉(zhuǎn)官網(wǎng)寫好的activity敷硅，然后識別成功在回調(diào)里功咒，把獲取的base64圖片發(fā)消息給RN，RN這邊通過監(jiān)聽獲得绞蹦，原生發(fā)來的消息力奋。 emmm ，很簡單吧幽七。
看下效果圖：
初始頁面
原諒我的臉比較大景殷，相框都放不下
檢測成功的activity
總體分兩部分：
第一部分 ：sdk的集成
第二部分：Android 和RN 的交互
第一部分：
在工程中導(dǎo)入libs
把demo中的libs文件拷貝到工程APP 目錄下
切換到 project可查看到 libs目錄，
然后配置libs 生成so文件：
這個是如何把libs生成jniLibs
sourceSets {
main {
jniLibs.srcDirs = ['libs']
}
}
包導(dǎo)入成功之后
拷貝res文件到 src的main下 這里主要是用人臉識別的圖片等資源澡屡。
res 目錄猿挚，覆蓋到工程項目的同名目錄上，一般情況下這兩個目錄在 project/app/src/main/
然后新建 第三方頁面 把sdk的demo的activity拷貝到工程中驶鹉。
目錄如下：
demo中的activity
這里拷貝之后绩蜻，然后配置 manifests下的 AndroidManifest.xml文件 這里主要是注冊 前面的三個activity 還有就是開啟 相應(yīng)的權(quán)限
注冊activity以及加權(quán)限
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<!--同盾添加權(quán)限-->
<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" />
<!--檢測結(jié)果頁面-->
<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 的模塊調(diào)用
}
@ReactMethod
public void startTongdun(){ //跳轉(zhuǎn)人臉識別activity
//這里 我們跳轉(zhuǎn)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中實例化一下。（記得導(dǎo)包）
image.png
然后測試了下 RN 這邊已經(jīng)能夠打開 人臉識別：不過進入的時候會出現(xiàn)閃退八秃，這時候要改下 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 跑起來了
最后就是 寫成功后的回調(diào) 把 抓取到的圖片給 RN 肉盹，告訴RN 成功或失敗了
在回調(diào)方法里寫：
新建一個交互類：
/**
* @param reactContext
* @param eventName 事件名
* @param params 傳慘
*/
public void senMsgToRN(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}
然后發(fā)消息給RN
//發(fā)消息給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發(fā)消息也寫好了，接下來就是js這邊的監(jiān)聽上忍，
componentWillMount() {
Platform.OS === "android" ?
DeviceEventEmitter.addListener('EventName', function (msg) {
console.log("androidmsg:" + JSON.stringify(msg));
})
: null
}
調(diào)用原生模塊
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() 關(guān)閉當(dāng)前頁面。
ios集成請參考react native 集成人臉識別 --ios
