美文网首页
你需要的 React Native 二维码扫描组件(简单,易用!

你需要的 React Native 二维码扫描组件(简单,易用!

作者: brillantzhao | 来源:发表于2017-07-04 11:27 被阅读0次

    1

    前言

    最近用 React Native 仿写了一下 ofo 应用,涉及到了二维码扫描的功能,在 github 上搜了一下,也没发现一个趁手的二维码扫描组件,所以干脆自己动手写了一个。

    其中使用摄像头实时扫描二维码进行解析的功能,已经通过react-native-camera这个库实现了,所以我也只是写了一个可以自定义样式的扫描界面,为了使用方便,我已经将其封装成组件,上传到了 NPM 服务器,下面就大概说一下实现过程以及使用方法。

    2

    特性

    兼容 RN0.4.0+ 的版本

    兼容 Android 和 iOS 平台

    支持二维码、条形码扫描

    轻松实现各种扫描界面

    3

    截图预览

    TwitterWeChat

    QQBrowserofo

    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 classDefaultScreenextendsComponent{

    render() {

    return(

    < QRScannerView

    onScanResultReceived

    ={this.barcodeReceived.bind(this)}

    renderTopBarView

    ={() =>this._renderTitleBar()}

    renderBottomMenuView

    ={() =>this._renderMenu()}

    />

    )

    }

    _renderTitleBar(){

    return(

    style={{color:'white',

    textAlignVertical:'center',

    textAlign:'center',

    font:20,padding:12}}

    >这里添加标题

    );

    }

    _renderMenu() {

    return(

    style={{color:'white',

    textAlignVertical:'center',

    textAlign:'center',

    font:20,padding:12}}

    >这里添加底部菜单

    )

    }

    barcodeReceived(e) {

    Toast.show('Type: '+ e.type +

    '\nData: '+ e.data);

    }

    }

    6

    基本属性

    属性名默认值描述

    maskColor#0000004D遮罩颜色

    borderColor#000000边框颜色

    cornerColor#000000转角颜色

    borderWidth0边框宽度

    cornerBorderWidth4转角宽度

    cornerBorderLength20转角长度

    rectHeight200扫描狂高度

    rectWidth200扫描狂宽度

    isCornerOffsetfalse转角是否偏移

    cornerOffsetSize0转角偏移量

    bottomMenuHeight0底部操作菜单高度

    scanBarAnimateTime2500扫描线移动速度

    scanBarColor#22ff00扫描线颜色

    scanBarImagenull使用图片扫描线

    scanBarHeight1.5扫描线高度

    scanBarMargin6扫描线距扫描狂边距

    hintText将二维码/条码放入框内,即可自动扫描提示文本

    hintTextStyle{ color: '#fff',

    fontSize: 14,

    backgroundColor:

    'transparent'}提示文字样式

    hintTextPosition130提示文字位置

    isShowScanBartrue是否显示扫描条

    bottomMenuStyle-底部菜单样式

    renderTopBarView-绘制顶部操作条组件

    renderBottomMenuView-绘制底部操作条组件

    onScanResultReceived-扫描结果回调

    8

    实现简述

    扫描界面可以分为 4 个部分:顶部标题栏,底部操作栏,遮罩层,扫描框。其中顶部标题栏和底部操作栏都是通过暴露方法让用户自己添加的。只有遮罩层和扫描框是传入参数进行设置的。上一张图大概说一下整个界面结构。

    组件代码结构如下,基本是通过使用绝对定位的 View 实现的布局

    {/*顶部标题栏*/}

    {/*扫描框部分*/}

    {/*扫描框边线*/}

    {/*扫描条及动画*/}

    {/*扫描框转角-左上*/}

    {/*扫描框转角-右上*/}

    {/*扫描框转角-左下*/}

    {/*扫描框转角-右下*/}

    {/*遮罩-上*/}

    {/*遮罩-左*/}

    {/*遮罩-右*/}

    {/*遮罩-下*/}

    {/*提示文字*/}

    {/*底部操作栏*/}

    详细代码比较长,就不一一列出来解释了。主要也比较简单,感觉没啥好说的,就是通过计算组件在屏幕上的坐标位置,进行对应的大小设置而已。感兴趣的可以直接跳转到 github 去看,地址在这里:https://github.com/MarnoDev/AC-QRCode-RN

    相关文章

      网友评论

          本文标题:你需要的 React Native 二维码扫描组件(简单,易用!

          本文链接:https://www.haomeiwen.com/subject/mhwthxtx.html