自定义 React Native 二维码扫描组件(简单，易用！)

• 本文为 Marno 原创，转载必须保留出处！
• 公众号 aMarno，关注后回复 RN 加入交流群
• React Native 优秀开源项目大全：www.marno.cn

---

1.前言

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

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

2.特性

• 兼容 RN0.4.0+ 的版本
• 兼容 Android 和 iOS 平台
• 支持二维码、条形码扫描
• 轻松实现各类扫描界面

3.截图预览

Twitter	WeChat	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 去看，地址在这里：github.com/MarnoDev/AC…

顺便提醒一下，由于目前尚未进行优化，因此打开扫码界面的速度感受会有一些慢，后面有时间会对这些细节进行优化的，具体能够关注个人公众号获取，或者留意下后面我在 github 仓库的更新。

---

获取更过 RN 干货，欢迎关注公众号 aMarno 。也欢迎加入 RN 群交流。