安装(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
}
});
网友评论