Code Monkey home page Code Monkey logo

ac-qrcode-rn's Introduction

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

Twitter WeChat OFO
QQBrowser Gif1 Gif2

4.Installation

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

// second step
react-native link

5.Basic Usage

import { QRScannerView } from 'ac-qrcode';

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}}
            >Here is title bar</Text>
        );
    }

    _renderMenu() {
        return (
            <Text
                style={{color:'white',textAlignVertical:'center', textAlign:'center',font:20,padding:12}}
            >Here is bottom menu</Text>
        )
    }

    barcodeReceived(e) {
        Toast.show('Type: ' + e.type + '\nData: ' + e.data);
        //console.log(e)
    }
}

6.Props

Prop Type Default Optional
maskColor string #0000004D true
borderColor string #000000 true
cornerColor string #000000 true
borderWidth number 0 true
cornerBorderWidth number 4 true
cornerBorderLength number 20 true
rectHeight number 200 true
rectWidth number 200 true
isCornerOffset bool false true
cornerOffsetSize number 0 true
bottomMenuHeight number 0 true
scanBarAnimateTime number 2500 true
scanBarColor string #22ff00 true
scanBarImage any null true
scanBarHeight number 1.5 true
scanBarMargin number 6 true
hintText string 将二维码/条码放入框内,
即可自动扫描
true
hintTextStyle object { color: '#fff',
fontSize: 14,
backgroundColor:'transparent'}
true
hintTextPosition number 130 true
isShowScanBar bool true true
bottomMenuStyle object - true
renderTopBarView func - flase
renderBottomMenuView func - false
onScanResultReceived func - false

7.To Do

  • Generate qr code
  • Control flashlight

8.Thanks

9.About Me

ac-qrcode-rn's People

Contributors

ethanlin-twer avatar geek-ch avatar marnodev avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.