React Native: react-native-idrecognition (Android)

react-native Android 身份证号码（正面）/有效期限（反面）识别（实时）

本地识别基于tess_two，位置对的话识别准确率达到90%以上

Getting started

$ npm i ribuluo000/IDCardRecognition --save
$ react-native link react-native-IDRecognition

或者

package.json 添加

  "dependencies": {
    "react-native-IDRecognition": "git+https://github.com/ribuluo000/IDCardRecognition.git",
  },

$ npm i
$ react-native link react-native-IDRecognition

Android

Add below snippet in your app setting.gradle file

include ':react-native-IDRecognition'
project(':react-native-IDRecognition').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-IDRecognition/android')

Insert the following lines inside the dependencies block in android/app/build.gradle:

    compile project(':react-native-IDRecognition')

Add below snippet in your app app/***/MainApplication.java file

Add import com.nick.idcard.IDRecognitionPackage; import com.nick.idcard.AssestUtils; to the imports at the top of the file




@Override
protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new IDRecognitionPackage()
        );
}



  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    new AssestUtils(this).init();
  }

copy files in tessdata to android/app/src/main/assets/tessdata

Usage


import React, { Component } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import RNIDRecognition from "react-native-IDRecognition";

export default class App extends Component<> {
    render() {
        return (
            <View style={styles.container}>
                <View style={{ flex : 0, flexDirection : 'row', justifyContent : 'center', }}>
                    <TouchableOpacity
                        onPress={this.showIdRecognitionFrontScreen.bind(this)}
                        style={styles.capture}
                    >
                        <Text style={{ fontSize : 14 }}> showIdRecognitionFrontScreen </Text>
                    </TouchableOpacity>
                </View>
                <View style={{ flex : 0, flexDirection : 'row', justifyContent : 'center', }}>
                    <TouchableOpacity
                        onPress={this.showIdRecognitionBackScreen.bind(this)}
                        style={styles.capture}
                    >
                        <Text style={{ fontSize : 14 }}> showIdRecognitionBackScreen </Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }

    showIdRecognitionFrontScreen = async function () {
        // alert('111');
        RNIDRecognition.showIdRecognitionFrontScreen({}, (data) => {
            console.log(data);
            alert(data);
        });
    };
    showIdRecognitionBackScreen = async function () {
        // alert('111');
        RNIDRecognition.showIdRecognitionBackScreen({}, (data) => {
            console.log(data);
            alert(data);
        });
    };

}

const styles = StyleSheet.create({
    container : {
        flex : 1,
        flexDirection : 'column',
        backgroundColor : 'black'
    },
    preview : {
        flex : 1,
        justifyContent : 'flex-end',
        alignItems : 'center'
    },
    capture : {
        flex : 0,
        backgroundColor : '#fff',
        borderRadius : 5,
        padding : 15,
        paddingHorizontal : 20,
        alignSelf : 'center',
        margin : 20
    }
});