srq

sg-rn-qr-scanner

一个二维码扫描组件,依赖react-native-camera

Showing:

Popularity

Downloads/wk

2

GitHub Stars

110

Maintenance

Last Commit

3yrs ago

Contributors

1

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-native-qr-scanner

NPM Version License

一个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:
<key>NSCameraUsageDescription</key>
<string/>
<key>NSPhotoLibraryUsageDescription</key>
<string/>
<key>NSMicrophoneUsageDescription</key>
<string/>
<key>NSPhotoLibraryAddUsageDescription</key>
<string/>
  • android在 android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.VIBRATE"/>

修复相机组件找不到google()方法的错误

https://github.com/react-native-community/react-native-camera/blob/master/docs/GradleUpgradeGuide.md

使用组件

扫描

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {QRscanner} from 'react-native-qr-scanner';

export default class Scanner extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flashMode: false,
      zoom: 0.2
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <QRscanner onRead={this.onRead} renderBottomView={this.bottomView} flashMode={this.state.flashMode} zoom={this.state.zoom} finderY={50}/>
      </View>
    );
  }
  bottomView = ()=>{
    return(
    <View style={{flex:1,flexDirection:'row',backgroundColor:'#0000004D'}}>
      <TouchableOpacity style={{flex:1,alignItems:'center', justifyContent:'center'}} onPress={()=>this.setState({flashMode:!this.state.flashMode})}>
        <Text style={{color:'#fff'}}>点我开启/关闭手电筒</Text>
      </TouchableOpacity>
    </View>
    );
  }
  onRead = (res) => {
    console.log(res);
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000'
  }
});

识别

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {QRreader} from 'react-native-qr-scanner';
import ImagePicker from 'react-native-image-picker';

export default class Scanner extends Component {
  constructor(props) {
    super(props);
    this.state = {
      reader: {
        message: null,
        data: null
      }
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={()=>{
          this.openPhoto();
        }}>
          <Text style={{marginTop: 20}}>打开相册识别二维码</Text>
        </TouchableOpacity>
        <View>
        {!this.state.reader? <Text>{!this.state.reader.message?'':`${this.state.reader.message}`}</Text>: <Text>{!this.state.reader.message?'':`${this.state.reader.message}:${this.state.reader.data}`}</Text>}
        </View>
      </View>
    );
  }
  
  openPhoto(){
    console.log('ImagePicker');
    ImagePicker.launchImageLibrary({}, (response) => {
      console.log('Response = ', response);
    
      if (response.didCancel) {
        console.log('User cancelled image picker');
      }
      else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      }
      else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      }
      else {
        if(response.uri){
          var path = response.path;
          if(!path){
              path = response.uri;
          }
          QRreader(path).then((data)=>{
            this.setState({reader: {
              message: '识别成功',
              data: data
            }});
            // 十秒后自动清空
            setTimeout(() => {
              this.setState({reader: {
                message: null,
                data: null
              }})
            }, 10000);
          }).catch((err)=>{
            this.setState({reader: {
              message: '识别失败',
              data: null
            }});
          });
          
      }
      }
    });
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
});

运行示例

$ cd example
$ yarn
$ react-native run-ios  或者 $ react-native run-android  

示例中代码已link过,所以不用link

QRscanner

属性类型默认值备注
isRepeatScanbooleanfalse是否允许重复扫描
zoomnumber0相机焦距 范围0-1
flashModeboolfalse开启手电筒
onReadfunc(res)=>{}扫描回调
maskColorstring'#0000004D'遮罩层颜色
borderColorstring'#000000'边框颜色
cornerColorstring'#22ff00'扫描框转角的颜色
borderWidthnumber0扫描框的边框宽度
cornerBorderWidthnumber4扫描框转角的border宽度
cornerBorderLengthnumber20扫描框转角的宽度高度
rectHeightnumber200扫描框高度
rectWidthnumber200扫描框宽度
finderXnumber0扫描框X轴偏移量
finderYnumber0扫描框Y轴偏移量
isCornerOffsetbooltrue边角是否偏移
cornerOffsetSizenumber1偏移量
bottomHeightnumber100底部预留高度
scanBarAnimateTimenumber2500扫描线时间
scanBarColorstring'#22ff00'扫描线颜色
scanBarImageanynull扫描线图片
scanBarHeightnumber1.5扫描线高度
scanBarMarginnumber6扫描线左右margin
hintTextstring'将二维码/条码放入框内,即可自动扫描'提示字符串
hintTextStyleobject{color: '#fff',fontSize: 14,backgroundColor: 'transparent'}提示字符串样式
hintTextPositionnumber130提示字符串距离容器底部的值
renderTopViewfunc() =>{}render顶部View
renderBottomViewfunc()=><View style={{flex:1,backgroundColor:'#0000004D'}}/>render底部View
isShowScanBarbooltrue是否显示扫描线
topViewStyleobjectnullrender顶部容器样式
bottomViewStyleobjectnullrender底部容器样式

QRreader

QRreader(path:uri)是一个promise对象,接受一个uri图片路径参数, 返回成功识别的对象,失败则返回错误

历史版本特性

1.3.2 因android扫描区域计算有诸多问题,所以注释掉android计算扫描区域,恢复android设备的全屏扫描。

1.3.1 修复ios打包发生的找不到库的错误,降低相册二维码识别的ios最低版本支持

1.3.0 修复android扫描的一个bug,加入相册二维码识别,感谢lewin大神的开源二维码识别。

1.2.4 限制扫码类型,修复android报错

1.2.2 添加是否允许重复扫描的api

1.2.1 修复android的报错以及android扫描区域的bug

1.2.0 修改底层依赖相机组件,添加扫描区域,并设置XY轴偏移量

1.1.3 完善文档

1.1.2 git保留demo示例,npm包去掉demo示例

1.1.1 修改文档错误地方,新增demo示例

1.1.0 修复bug,新增手电筒api

1.0.0 上传基础组件

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100