0.6.1 • Published 7 years ago

ac-qrcode-scanner-rn v0.6.1

Weekly downloads
7
License
Apache-2.0
Repository
-
Last release
7 years ago

1.Guide

2.Features

  • Can scan QR code,Bar code
  • Support Android and iOS
  • Base on react-native-camera
  • Scanning interface can be customized

3.ScreenShots

TwitterWeChatOFO
npm.ionpm.ionpm.io
QQBrowserGif1Gif2
npm.ionpm.ionpm.io

4.Installation

// first step
npm install ac-qrcode-scanner-rn --save

// second step
react-native link

5.Basic Usage

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

export default class QQBrowserScreen extends Component {
    render() {
        return (
            < QRScannerView
                onScanResultReceived={this.barcodeReceived.bind(this)}

                renderTopBarView={() => {
                    return (
                        <View>
                          <Text}>这顶部标题栏</Text>
                        </View>
                    )
                }}

                renderBottomMenuView={() => {
                    return (
                        <View>
                            <Text>相册</Text>
                        </View>
                    )
                }}
            />
        )
    }

    barcodeReceived(e) {
        console.log(e)
    }
}

6.Props

PropTypeDefaultOptionalDescription
maskColorstring#0000004D--
borderColorstring#000000--
cornerColorstring#000000--
borderWidthnumber0--
cornerBorderWidthnumber4--
cornerBorderLengthnumber20--
rectHeightnumber200
rectWidthnumber200
isCornerOffsetboolfalse
cornerOffsetSizenumber0
bottomMenuHeightnumber100
scanBarAnimateTimenumber2500
scanBarColorstring#22ff00
scanBarImageanynull
scanBarHeightnumber1.5
scanBarMarginnumber6
hintTextstring将二维码/条码放入框内,即可自动扫描--
hintTextStyleobject{color: '#fff', fontSize: 14}--
hintTextPositionnumber130--
renderTopBarViewfunc---
renderBottomMenuViewfunc---
isShowScanBarbooltrue--
bottomMenuStyleobject---

6.To Do

  • 生成二维码功能
  • 解决重复扫码的问题
  • 优化属性设置方式

8.Thanks

9.About Me