安装
yarn add react-native-touch-id
链接库
react-native link react-native-touch-id
安卓添加权限(AndroidManifest.xml文件)
代码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
});
})
}
handleTouch() {
TouchID.isSupported()
.then(() => {
TouchID.authenticate()
.then(() => {
Alert.alert('识别成功');
})
.catch(e => {
Alert.alert(e.message);
});
})
.catch(e => {
console.log(e);
});
}
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>
);
}
}
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
}
});