RN的生物识别指纹验证库:react-native-touch-

2020-09-09  本文已影响0人  println文

安装(rn项目目录)

yarn add react-native-touch-id
// npm i -S react-native-touch-id

链接库

react-native link react-native-touch-id

安卓添加权限(AndroidManifest.xml文件)

 <!-- <uses-permission android:name="android.permission.USE_FINGERPRINT" /> -->

代码TouchTest.js

import React, { Component } from 'react';
import {
    View,
    Text,
    Alert,
    StyleSheet,
    TouchableHighlight,
} from 'react-native';
import TouchID from "react-native-touch-id";

export default class TouchTest extends Component {
    constructor() {
        super()
        this.state = {
            supportTouch: ''
        };
    }

    componentDidMount() {
        // 是否支持生物识别身份验证
        TouchID.isSupported()
            .then(res => {
                this.setState({
                    supportTouch: res
                });
            })
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.miniText}>本设备是否支持指纹?<Text style={{ color: "#f00" }}>{this.state.supportTouch ? '是' : '否'}</Text></Text>
                <TouchableHighlight
                    style={styles.btn}
                    onPress={this.handleTouch}
                >
                    <Text style={styles.txt}>测试指纹</Text>
                </TouchableHighlight>
            </View>
        );
    }

    // 验证身份
    handleTouch() {
        TouchID.isSupported()
            .then(() => {
                TouchID.authenticate()
                    .then(() => {
                        Alert.alert('识别成功');
                    })
                    .catch(e => {
                        Alert.alert(e.message);
                    });
            })
            .catch(e => {
                console.log(e);
            });
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#F5FCFF"
    },
    btn: {
        padding: 12,
        borderRadius: 50,
        backgroundColor: "#409EFF"
    },
    txt: {
        color: "#fff",
        fontWeight: "bold"
    },
    miniText: {
        color: "#999",
        marginBottom: 24
    }
});
上一篇下一篇

猜你喜欢

热点阅读