美文网首页
RN的生物识别指纹验证库:react-native-touch-

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

作者: println文 | 来源:发表于2020-09-09 13:54 被阅读0次

    安装(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
        }
    });
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/bgeeektx.html