数据API 产品矩阵 案例 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

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

1前言

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

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

2特性

  • 兼容 RN0.4.0+ 的版本

  • 兼容 Android 和 iOS 平台

  • 支持二维码、条形码扫描

  • 轻松实现各种扫描界面

3截图预览

1707-0.jpg.gif

Twitter

1708-640.jpg.jpg

WeChat

1709-640.jpg.jpg

QQBrowser

1710-640.jpg.jpg

ofo

1711-640.jpg.jpg

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);
   
}
}

6基本属性

1712-640.jpg.jpg

属性名默认值描述
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 个部分:顶部标题栏,底部操作栏,遮罩层,扫描框。其中顶部标题栏和底部操作栏都是通过暴露方法让用户自己添加的。只有遮罩层和扫描框是传入参数进行设置的。上一张图大概说一下整个界面结构。

1713-640.jpg.jpg

组件代码结构如下,基本是通过使用绝对定位的 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 仓库的更新。


获取更过 RN 干货,欢迎关注公众号 aMarno 

也欢迎加入 RN 群交流

原文来自:Marno

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
你需要的 React Native 二维码扫描组件(简单,易用!)
发布:2017-06-08 12:48:45

1前言

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

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

2特性

  • 兼容 RN0.4.0+ 的版本

  • 兼容 Android 和 iOS 平台

  • 支持二维码、条形码扫描

  • 轻松实现各种扫描界面

3截图预览

1707-0.jpg.gif

Twitter

1708-640.jpg.jpg

WeChat

1709-640.jpg.jpg

QQBrowser

1710-640.jpg.jpg

ofo

1711-640.jpg.jpg

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);
   
}
}

6基本属性

1712-640.jpg.jpg

属性名默认值描述
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 个部分:顶部标题栏,底部操作栏,遮罩层,扫描框。其中顶部标题栏和底部操作栏都是通过暴露方法让用户自己添加的。只有遮罩层和扫描框是传入参数进行设置的。上一张图大概说一下整个界面结构。

1713-640.jpg.jpg

组件代码结构如下,基本是通过使用绝对定位的 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 仓库的更新。


获取更过 RN 干货,欢迎关注公众号 aMarno 

也欢迎加入 RN 群交流

原文来自:Marno

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
×

前往领取
电话 0512-88869195
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future