你的位置:首页 > Java教程

[Java教程]React Native 二维码扫描组件



 

学rn得朋友们,你们知道rn开源项目吗?来吧看这里:http://www.marno.cn/

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(      <Text        style={{color:'white',textAlignVertical:'center', textAlign:'center',font:20,padding:12}}      >这里添加标题</Text>    );  }  _renderMenu() {    return (      <Text        style={{color:'white',textAlignVertical:'center', textAlign:'center',font:20,padding:12}}      >这里添加底部菜单</Text>    )  }  barcodeReceived(e) {    Toast.show('Type: ' + e.type + '\nData: ' + e.data);    //console.log(e)  }}

6.属性列表

属性名类型默认值可选描述
maskColorstring0000004Dtrue遮罩颜色
borderColorstring000000true边框颜色
cornerColorstring000000true转角颜色
borderWidthnumber0true边框宽度
cornerBorderWidthnumber4true转角宽度
cornerBorderLengthnumber20true转角长度
rectHeightnumber200true扫描狂高度
rectWidthnumber200true扫描狂宽度
isCornerOffsetboolfalsetrue转角是否偏移
cornerOffsetSizenumber0true转角偏移量
bottomMenuHeightnumber0true底部操作菜单高度
scanBarAnimateTimenumber2500true扫描线移动速度
scanBarColorstring22ff00true扫描线颜色
scanBarImageanynulltrue使用图片扫描线
scanBarHeightnumber1.5true扫描线高度
scanBarMarginnumber6true扫描线距扫描狂边距
hintTextstring将二维码/条码放入框内,即可自动扫描true提示文本
hintTextStyleobject{ color: ‘#fff’, fontSize: 14,backgroundColor:’transparent’}true提示文字样式
hintTextPositionnumber130true提示文字位置
isShowScanBarbooltruetrue是否显示扫描条
bottomMenuStyleobject-true底部菜单样式
renderTopBarViewfunc-flase绘制顶部操作条组件
renderBottomMenuViewfunc-false绘制底部操作条组件
onScanResultReceivedfunc-false

 

 

 

 

 

7.实现简述

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

 

 

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

<View>  <Camera>    {/*顶部标题栏*/}    <TopBarView />    <View>      {/*扫描框部分*/}      <View>        {/*扫描框边线*/}        <View>          {/*扫描条及动画*/}          <Animated.View>        </View>        {/*扫描框转角-左上*/}        <View />        {/*扫描框转角-右上*/}        <View />        {/*扫描框转角-左下*/}        <View />        {/*扫描框转角-右下*/}        <View />      </View>      {/*遮罩-上*/}      <View />      {/*遮罩-左*/}      <View />      {/*遮罩-右*/}      <View />      {/*遮罩-下*/}      <View />      {/*提示文字*/}      <HintTextView />    </View>    {/*底部操作栏*/}    <BottomMenuView>  </Camera></View>

 



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

顺便提醒一下,因为目前还没有进行优化,所以打开扫码界面的速度感觉会有一些慢,后面有时间会对这些细节进行优化的,具体可以关注我的公众号获取,或者留意下后面我在 github 仓库的更新。