npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sg-rn-qr-scanner

v1.3.6

Published

this is qrcode scanner.

Downloads

7

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

| 属性 | 类型 | 默认值 | 备注 | | ------------- | ------- | ------------- | ------------- | | 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图片路径参数, 返回成功识别的对象,失败则返回错误

历史版本特性

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 上传基础组件