本人还是个在RN道路上跌跌撞撞的技术小白，写文章也是第一次，所以有啥不对的，也请各位大大手下留情😝～对了，RN的项目都是IOS方向的，所以分享的都是IOS方向上的使用心得。
前不久的项目需求刚好需要指纹锁这个功能，找了好多文章才看到react-native-touch-id（调用TouchID认证）。
react-native-touch-id，是调用TouchID认证的第三方组件。个人感觉这个第三方组件IOS方向，其实就是把苹果的LocalAuthentication认证封装起来。
使用的方法可以参考react-native-touch-id的文档说明，里面也有example可以看这个组件的用法。当然，这个example是需要npm install装好环境才能跑的，如果npm install不行再考虑yarn install吧。
本文只是粗略的说明了安装与使用，具体代码可以参考github的example吧。这个第三方组件默认是使用Touch id验证用户，没有使用设备密码来验证用户，详情看第三部分的“额外说明”。
还有就是，对指纹验证的界面不满意的小伙伴，个人觉得要去组件里改。android的小伙伴，找到node_modules文件夹里的react-native-touch-id文件夹，在android文件夹-->src-->res-->layout-->fingerprint_dialog.xml进行修改，而Authentication Required这个标题则在react-native-touch-id文件夹下TouchID.android.js里修改。原谅我看不懂IOS原生代码，所以无从下手。
PS：只有在真机上运行，才能指纹验证，在模拟器上只会提示不支持指纹验证。其次，要保证真机设置了指纹。
一、安装
npm install --save react-native-touch-id
文档提到了安装好第三方组件之后，需要Linking the Library。个人比较喜欢手动去Link。
手动Link步骤：
1⃣️ 如图一，在你的项目里找到Libraries，右键点击Libraries------Add Files to “你的项目名”...
图一
2⃣️ 如图二，找到你项目的位置，打开node_modules，找到react-native-touch-id里的TouchID.xcodeproj文件，最后点击ADD按钮。
图二
3⃣️ 如图三，可以看到已经把TouchID.xcodeproj文件ADD好了，但libTouchID.a文件是报红的,这就需要第四步、第五步的操作。
图三
4⃣️ 如图四，点击你的项目，会看到右侧的界面，TARGETS面板选中的是你的项目名，在General中找到Linked Frameworks and Libraries，点击“+”。
图四
5⃣️ 如图五，在弹出的界面里搜索“libTouchID”，选中文件，点击ADD，到此Link就完成了。
图五
二、使用
看github文档说明中洋洋洒洒写了一堆话，其实最主要的也就只是下面的代码。具体使用后的效果可以查看github中的example的运行效果。
import TouchID from 'react-native-touch-id'; //引入
...
check=()=>{ //点击事件
TouchID.isSupported() //判断设备是否支持TouchID验证
.then(success => {
TouchID.authenticate() //判断TouchID验证是否成功
.then(success => {
//验证成功后进行的操作
})
.catch(error => {
//验证失败后进行的操作
});
})
.catch(error => {
//设备不支持TouchID验证后进行的操作
});
}
...
三、额外说明
在这个第三方组件里使用了LAPolicyDeviceOwnerAuthenticationWithBiometrics，也就是使用Touch id来验证设备所有者，所以你指纹识别错误之后是弹不出让你输密码的界面。
要想实现“使用Touch id或者设备密码来验证用户”，只要将LAPolicyDeviceOwnerAuthenticationWithBiometrics替换成LAPolicyDeviceOwnerAuthentication就可以了,如图六。
图六
四、总结
react-native-touch-id的填坑之旅基本也讲的差不多了，希望能够帮到有需要的小伙伴们😊
网友评论