react-native-qr-scanner
一个react-native的二维码扫描组件,支持扫描区域的限制以及扫描区域的偏移。
安装步骤:
安装依赖
yarn add react-native-camera react-native-qr-scanner
link依赖到native
react-native link react-native-camera && react-native-qr-scanner
添加相机权限:
- ios在
ios/projectName/Info.plist
:
NSCameraUsageDescriptionNSPhotoLibraryUsageDescriptionNSMicrophoneUsageDescriptionNSPhotoLibraryAddUsageDescription
- android在
android/app/src/main/AndroidManifest.xml
:
修复相机组件找不到google()方法的错误
https://github.com/react-native-community/react-native-camera/blob/master/docs/GradleUpgradeGuide.md
使用组件
扫描
;;; { superprops; thisstate = flashMode: false zoom: 02 ; } { return <View style=stylescontainer> <QRscanner onRead=thisonRead renderBottomView=thisbottomView flashMode=thisstateflashMode zoom=thisstatezoom finderY=50/> </View> ; } { return <View style=flex:1flexDirection:'row'backgroundColor:'#0000004D'> <TouchableOpacity style=flex:1alignItems:'center' justifyContent:'center' onPress=this> <Text style=color:'#fff'>点我开启/关闭手电筒</Text> </TouchableOpacity> </View> ; } { console; }const styles = StyleSheet;
识别
;;;; { superprops; thisstate = reader: message: null data: null ; } { return <View style=stylescontainer> <TouchableOpacity onPress={ this; }> <Text style=marginTop: 20>打开相册识别二维码</Text> </TouchableOpacity> <View> !thisstatereader? <Text>!thisstatereadermessage?'':``</Text>: <Text>!thisstatereadermessage?'':`:`</Text> </View> </View> ; } { console; ImagePicker; }const styles = StyleSheet;
运行示例
$ cd example$ yarn$ react-native run-ios 或者 $ react-native run-android
示例中代码已link过,所以不用link
QRscanner
属性 | 类型 | 默认值 | 备注 |
---|---|---|---|
isRepeatScan | boolean | false | 是否允许重复扫描 |
zoom | number | 0 | 相机焦距 范围0-1 |
flashMode | bool | false | 开启手电筒 |
onRead | func | (res)=>{} | 扫描回调 |
maskColor | string | '#0000004D' | 遮罩层颜色 |
borderColor | string | '#000000' | 边框颜色 |
cornerColor | string | '#22ff00' | 扫描框转角的颜色 |
borderWidth | number | 0 | 扫描框的边框宽度 |
cornerBorderWidth | number | 4 | 扫描框转角的border宽度 |
cornerBorderLength | number | 20 | 扫描框转角的宽度高度 |
rectHeight | number | 200 | 扫描框高度 |
rectWidth | number | 200 | 扫描框宽度 |
finderX | number | 0 | 扫描框X轴偏移量 |
finderY | number | 0 | 扫描框Y轴偏移量 |
isCornerOffset | bool | true | 边角是否偏移 |
cornerOffsetSize | number | 1 | 偏移量 |
bottomHeight | number | 100 | 底部预留高度 |
scanBarAnimateTime | number | 2500 | 扫描线时间 |
scanBarColor | string | '#22ff00' | 扫描线颜色 |
scanBarImage | any | null | 扫描线图片 |
scanBarHeight | number | 1.5 | 扫描线高度 |
scanBarMargin | number | 6 | 扫描线左右margin |
hintText | string | '将二维码/条码放入框内,即可自动扫描' | 提示字符串 |
hintTextStyle | object | {color: '#fff',fontSize: 14,backgroundColor: 'transparent'} | 提示字符串样式 |
hintTextPosition | number | 130 | 提示字符串距离容器底部的值 |
renderTopView | func | () =>{} | render顶部View |
renderBottomView | func | ()=><View style={{flex:1,backgroundColor:'#0000004D'}}/> | render底部View |
isShowScanBar | bool | true | 是否显示扫描线 |
topViewStyle | object | null | render顶部容器样式 |
bottomViewStyle | object | null | render底部容器样式 |
QRreader
QRreader(path:uri)是一个promise对象,接受一个uri图片路径参数, 返回成功识别的对象,失败则返回错误