Android指纹验证

最新推荐文章于 2025-07-10 12:39:57 发布

江洋a

最新推荐文章于 2025-07-10 12:39:57 发布

阅读量529

点赞数

CC 4.0 BY-SA版权

文章标签： rn指纹 react native 指纹验证指纹密码

本文链接：https://blog.youkuaiyun.com/cannedSardines/article/details/88912725

这篇博客记录了如何在Android应用中实现指纹验证，主要使用了react-native-fingerprint-scanner库。首先通过npm安装并链接该库，然后在proguard-rules.pro文件中进行额外配置。为了进行指纹验证，还需引入并配置相关组件，如FingerprintPopup.component.ios.js和FingerprintPopup.component.android.js，以及它们的样式文件。Android实施中还涉及ShakingText.component.js的引入。最后，说明了如何在需要的页面中触发和控制指纹验证弹框的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录——目前ios指纹验证还报错不能用

Android指纹验证

下载触摸组件：$ npm install react-native-fingerprint-scanner --save；

自动配资：$ react-native link react-native-fingerprint-scanner；

额外配置：在android/app/proguard-rules.pro文件里配置⬇️


#MeiZu Fingerprint

-keep class com.fingerprints.service.** { *; }
-dontwarn com.fingerprints.service.**

#Samsung Fingerprint

-keep class com.samsung.android.sdk.** { *; }
-dontwarn com.samsung.android.sdk.**

下载propTypes库：
npm install --save prop-types

引入方式：
import PropTypes from 'prop-types'

以下按照此网址方法编写：https://dotnet.ctolib.com/article/wiki/49206

网址教程：ios实施&android实施引入方法为

此git库react-native-fingerprint-scanner 中的

FingerprintPopup.component.ios.js和FingerprintPopup.component.android.js文件

这两个文件放在公共js文件夹中，他们两个的公共样式：FingerprintPopup.component.style.js文件

Android实施中有引入文件ShakingText.component.js也在上面的git库中

在这里插入图片描述

最后是展现触发指纹弹框：

在需要指纹验证的页面引入：

import FingerprintScanner from 'react-native-fingerprint-scanner';

import FingerprintPopup from '../../common/components/shakingText/FingerprintPopup.component';

配置指纹验证弹框的显示隐藏和触发按钮：

handleFingerprintShowed = () => {

	this.setState({ popupShowed: true });

};


handleFingerprintDismissed = () => {

    this.setState({ popupShowed: false });
    
};

componentDidMount() {

  	FingerprintScanner
    	.isSensorAvailable()
    	.catch(error => this.setState({ errorMessage: error.message }));

}


rende(){
  	const { errorMessage, popupShowed } = this.state;
    return(
    
    	<TouchableOpacity style={styles.fingerprint} onPress={this.handleFingerprintShowed} disabled={!!errorMessage}>
    		<Image source={require('../../assets/fingerPrint/TouchID.png')} />
		</TouchableOpacity>
    
    	{errorMessage && (
    		<Text style={styles.errorMessage}>
    			{errorMessage}
    		</Text>
    	)}
    
    	{popupShowed && (
	    	<FingerprintPopup style={styles.popup} handlePopupDismissed={this.handleFingerprintDismissed}/>
		)}
   
   
    	constructor(props) {
    		super(props);
    		this.state = {
	    		errorMessage: undefined,
    			popupShowed: false
    		};
    	}
    )
}