原文
摘要:最近用 React Native 仿写了一下 ofo 应用,涉及到了二维码扫描的功能,在 github 上搜了一下,也没发现一个趁手的二维码扫描组件,所以干脆自己动手写了一个。其中使用摄像头实时扫描二维码进行解析的功能,已经通过 react-native-camera 这个库实现了,所以我也只是写了一个可以自定义样式的扫描界面,为了使用方便,我已经将其封装成组件,上传到了 NPM 服务器,下面就大概说一下实现过程以及使用方法。
1 前言
最近用 React Native 仿写了一下 ofo 应用,涉及到了二维码扫描的功能,在 github 上搜了一下,也没发现一个趁手的二维码扫描组件,所以干脆自己动手写了一个。
其中使用摄像头实时扫描二维码进行解析的功能,已经通过 react-native-camera 这个库实现了,所以我也只是写了一个可以自定义样式的扫描界面,为了使用方便,我已经将其封装成组件,上传到了 NPM 服务器,下面就大概说一下实现过程以及使用方法。
2 特性
兼容 RN0.4.0+ 的版本
兼容 Android 和 iOS 平台
支持二维码、条形码扫描
轻松实现各种扫描界面
3 截图预览
4 安装
- //第一步
- npm install ac-qrcode --save
- //第二步(react-native-camera 需要 link 后才能使用)
- react-native link
- PS:如果 link 没有成功,会报错。如果没有自动 link,可以手动 link
5 基本使用
- import {
- QRScannerView
- }
- from 'ac-qrcode';
- export
- default class DefaultScreen extends Component {
- render() {
- return ( < QRScannerView onScanResultReceived = {
- this.barcodeReceived.bind(this)
- }
- renderTopBarView = { () = >this._renderTitleBar()
- }
- renderBottomMenuView = { () = >this._renderMenu()
- }
- />
- )
- }
- _renderTitleBar(){
- return(
- 这里添加标题 );
- }
- _renderMenu() {
- return (
- 这里添加底部菜单 )
- }
- barcodeReceived(e) {
- Toast.show('Type: ' + e.type +
- '\nData: ' + e.data);
- }
- }/
6 基本属性
8 实现简述
扫描界面可以分为 4 个部分:顶部标题栏,底部操作栏,遮罩层,扫描框。其中顶部标题栏和底部操作栏都是通过暴露方法让用户自己添加的。只有遮罩层和扫描框是传入参数进行设置的。上一张图大概说一下整个界面结构。
组件代码结构如下,基本是通过使用绝对定位的 View 实现的布局
- {
- /*顶部标题栏*/
- } {
- /*扫描框部分*/
- } {
- /*扫描框边线*/
- } {
- /*扫描条及动画*/
- } {
- /*扫描框转角-左上*/
- } {
- /*扫描框转角-右上*/
- } {
- /*扫描框转角-左下*/
- } {
- /*扫描框转角-右下*/
- } {
- /*遮罩-上*/
- } {
- /*遮罩-左*/
- } {
- /*遮罩-右*/
- } {
- /*遮罩-下*/
- } {
- /*提示文字*/
- } {
- /*底部操作栏*/
- }
详细代码比较长,就不一一列出来解释了。主要也比较简单,感觉没啥好说的,就是通过计算组件在屏幕上的坐标位置,进行对应的大小设置而已。感兴趣的可以直接跳转到 github 去看,地址在这里:https://github.com/MarnoDev/AC-QRCode-RN
顺便提醒一下,因为目前还没有进行优化,所以打开扫码界面的速度感觉会有一些慢,后面有时间会对这些细节进行优化的,具体可以关注我的公众号获取,或者留意下后面我在 github 仓库的更新。
来源: http://www.tuicool.com/articles/FbyQrue