自定义 React Native 二维码扫描组件(简单,易用!)
2017-05-02 08:50
309 查看
本文为 Marno 原创,转载必须保留出处!
公众号 aMarno,关注后回复 RN 加入交流群
简书专题《 React-Native 开发阵营 》,欢迎关注和投稿
React Native 优秀开源项目大全:http://www.marno.cn http://www.jianshu.com/p/347ccf787d62
最近用 React Native 仿写了一下 ofo 应用,涉及到了二维码扫描的功能,在 github 上搜了一下,也没发现一个趁手的二维码扫描组件,所以干脆自己动手写了一个。
其中使用摄像头实时扫描二维码进行解析的功能,已经通过 react-native-camera 这个库实现了,所以我也只是写了一个可以自定义样式的扫描界面,为了使用方便,我已经将其封装成组件,上传到了 NPM 服务器,下面就大概说一下实现过程以及使用方法。
兼容 RN0.4.0+ 的版本
兼容 Android 和 iOS 平台
支持二维码、条形码扫描
轻松实现各种扫描界面
//第一步
npm install ac-qrcode --save
//第二步(react-native-camera 需要 link 后才能使用)
react-native link
PS:如果 link 没有成功,会报错。如果没有自动 link,可以手动 link
扫描界面可以分为 4 个部分:顶部标题栏,底部操作栏,遮罩层,扫描框。其中顶部标题栏和底部操作栏都是通过暴露方法让用户自己添加的。只有遮罩层和扫描框是传入参数进行设置的。上一张图大概说一下整个界面结构。
组件代码结构如下,基本是通过使用绝对定位的 View 实现的布局
详细代码比较长,就不一一列出来解释了。主要也比较简单,感觉没啥好说的,就是通过计算组件在屏幕上的坐标位置,进行对应的大小设置而已。感兴趣的可以直接跳转到 github 去看,地址在这里:https://github.com/MarnoDev/AC-QRCode-RN
顺便提醒一下,因为目前还没有进行优化,所以打开扫码界面的速度感觉会有一些慢,后面有时间会对这些细节进行优化的,具体可以关注我的公众号获取,或者留意下后面我在 github 仓库的更新。
公众号 aMarno,关注后回复 RN 加入交流群
简书专题《 React-Native 开发阵营 》,欢迎关注和投稿
React Native 优秀开源项目大全:http://www.marno.cn http://www.jianshu.com/p/347ccf787d62
1.前言
最近用 React Native 仿写了一下 ofo 应用,涉及到了二维码扫描的功能,在 github 上搜了一下,也没发现一个趁手的二维码扫描组件,所以干脆自己动手写了一个。其中使用摄像头实时扫描二维码进行解析的功能,已经通过 react-native-camera 这个库实现了,所以我也只是写了一个可以自定义样式的扫描界面,为了使用方便,我已经将其封装成组件,上传到了 NPM 服务器,下面就大概说一下实现过程以及使用方法。
2.特性
兼容 RN0.4.0+ 的版本兼容 Android 和 iOS 平台
支持二维码、条形码扫描
轻松实现各种扫描界面
3.截图预览
OFO | ||
---|---|---|
QQBrowser | Gif1 | Gif2 |
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.属性列表
属性名 | 类型 | 默认值 | 可选 | 描述 |
---|---|---|---|---|
maskColor | string | #0000004D | true | 遮罩颜色 |
borderColor | string | #000000 | true | 边框颜色 |
cornerColor | string | #000000 | true | 转角颜色 |
borderWidth | number | 0 | true | 边框宽度 |
cornerBorderWidth | number | 4 | true | 转角宽度 |
cornerBorderLength | number | 20 | true | 转角长度 |
rectHeight | number | 200 | true | 扫描狂高度 |
rectWidth | number | 200 | true | 扫描狂宽度 |
isCornerOffset | bool | false | true | 转角是否偏移 |
cornerOffsetSize | number | 0 | true | 转角偏移量 |
bottomMenuHeight | number | 0 | true | 底部操作菜单高度 |
scanBarAnimateTime | number | 2500 | true | 扫描线移动速度 |
scanBarColor | string | #22ff00 | true | 扫描线颜色 |
scanBarImage | any | null | true | 使用图片扫描线 |
scanBarHeight | number | 1.5 | true | 扫描线高度 |
scanBarMargin | number | 6 | true | 扫描线距扫描狂边距 |
hintText | string | 将二维码/条码放入框内,即可自动扫描 | true | 提示文本 |
hintTextStyle | object | { color: '#fff', fontSize: 14,backgroundColor:'transparent'} | true | 提示文字样式 |
hintTextPosition | number | 130 | true | 提示文字位置 |
isShowScanBar | bool | true | true | 是否显示扫描条 |
bottomMenuStyle | object | - | true | 底部菜单样式 |
renderTopBarView | func | - | flase | 绘制顶部操作条组件 |
renderBottomMenuView | func | - | false | 绘制底部操作条组件 |
onScanResultReceived | func | - | 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 仓库的更新。
相关文章推荐
- 自定义 React Native 二维码扫描组件(简单,易用!)
- 自定义 React Native 二维码扫描组件(简单,易用!)
- 自定义 React Native 二维码扫描组件
- React Native 二维码扫描组件(简单,易用!)
- 一个简单的组件开发源码(自定义Picturebox)
- Android 如何自定义一个简单的组件和自定义的点击事件(中级)
- React native自定义组件之Button按钮
- Swing 实现简单的自定义不规则按钮组件
- React Native中NavigatorIOS组件的简单使用详解
- React Native 的子组件向父组件传值的简单例子
- React Native自定义组件——弹出框
- React Native获取组件在屏幕上的绝对位置(包括自定义组件)
- 简单的Ext自定义组件
- 自定义组件的简单使用—View
- React Native 篇之 自定义组件、引入组件、页面跳转
- React Native -20.React Native 自定义组件(跨文件,类似创建一个类)
- mxml中加载简单自定义组件
- Android自定义组件系列【13】——Android自定义对话框如此简单
- 【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例
- React Native 扫码组件react-native-camera与自定义UI界面动画套装