0.2.1 • Published 6 years ago

ac-qrcode-rn v0.2.1

Weekly downloads
13
License
Apache-2.0
Repository
-
Last release
6 years ago

ac-qrcode-rn

特性

  • 支持扫描二维码、条形码
  • 支持 Android 和 iOS 系统
  • 基于 react-native-camera
  • 轻松实现各类扫描界面

安装

$ yarn add ac-qrcode-rn
$ yarn add react-native-camera
$ react-native link react-native-camera

基本使用

import { QRScannerView } from 'ac-qrcode-rn'

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)
  }
}

属性列表

npm.io

属性名类型默认值可选描述
maskColorstring#0000004Dtrue遮罩颜色
borderColorstring#000000true边框颜色
cornerColorstring#000000true转角颜色
borderWidthnumber0true边框宽度
cornerBorderWidthnumber4true转角宽度
cornerBorderLengthnumber20true转角长度
rectHeightnumber200true扫描狂高度
rectWidthnumber200true扫描狂宽度
isCornerOffsetboolfalsetrue转角是否偏移
cornerOffsetSizenumber0true转角偏移量
bottomMenuHeightnumber0true底部操作菜单高度
scanBarAnimateTimenumber2500true扫描线移动速度
scanBarColorstring#22ff00true扫描线颜色
scanBarImageanynulltrue使用图片扫描线
scanBarHeightnumber1.5true扫描线高度
scanBarMarginnumber6true扫描线距扫描狂边距
hintTextstring将二维码/条码放入框内,即可自动扫描true提示文本
hintTextStyleobject{ color: '#fff', fontSize: 14,backgroundColor:'transparent'}true提示文字样式
hintTextPositionnumber130true提示文字位置
isShowScanBarbooltruetrue是否显示扫描条
bottomMenuStyleobject-true底部菜单样式
renderTopBarViewfunc-flase绘制顶部操作条组件
renderBottomMenuViewfunc-false绘制底部操作条组件
onScanResultReceivedfunc-false扫描结果回调

感谢