Code Monkey home page Code Monkey logo

react-native-smart-barcode's Introduction

react-native-smart-barcode

npm npm npm npm

A smart barcode scanner component for React Native app. The library uses https://github.com/zxing/zxing to decode the barcodes for android, and also supports ios.

Preview

react-native-smart-barcode-preview-ios

Installation

yarn add react-native-smart-barcode@https://github.com/puti94/react-native-smart-barcode.git

Notice

It can only be used greater-than-equal react-native 0.4.0 for ios, if you want to use the package less-than react-native 0.4.0, use npm install [email protected] --save

AutoInstallation

react-native link react-native-smart-barcode

Add Privacy - Camera Usage Description Privacy - Photo Library Usage Description property in your info.plist(for ios 10)

  • In AndroidManifest.xml, add camera permissions
...
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.VIBRATE"/>

<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
...

Full Demo

see ReactNativeComponentDemos

Usage

Install the package from npm with npm install react-native-smart-barcode --save. Then, require it from your app's JavaScript files with import Barcode,{BarcodeUtil} from 'react-native-smart-barcode'.

// 没有权限需要自己申请,推荐react-native-permissions 这个库
//从相册选取二维码 没有则返回""
BarcodeUtil.decodePictureFromPhotos().then(code=>console.log(code))
//切换闪光灯
BarcodeUtil.switchFlashLightState(true or false)
import React, {
    Component,
} from 'react'
import {
    View,
    StyleSheet,
    Alert,
} from 'react-native'

import Barcode from 'react-native-smart-barcode'
import TimerEnhance from 'react-native-smart-timer-enhance'

class BarcodeTest extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            viewAppear: false,
        };
    }

    render() {

        return (
            <View style={{flex: 1, backgroundColor: 'black',}}>
                {this.state.viewAppear ? <Barcode style={{flex: 1, }}
                                                  ref={ component => this._barCode = component }
                                                  onBarCodeRead={this._onBarCodeRead}/> : null}
            </View>
        )
    }

    componentDidMount() {
        let viewAppearCallBack = (event) => {
            this.setTimeout( () => {
                this.setState({
                    viewAppear: true,
                })
            }, 255)

        }
        this._listeners = [
            this.props.navigator.navigationContext.addListener('didfocus', viewAppearCallBack)
        ]

    }

    componentWillUnmount () {
        this._listeners && this._listeners.forEach(listener => listener.remove());
    }

    _onBarCodeRead = (e) => {
        console.log(`e.nativeEvent.data.type = ${e.nativeEvent.data.type}, e.nativeEvent.data.code = ${e.nativeEvent.data.code}`)
        this._stopScan()
        Alert.alert(e.nativeEvent.data.type, e.nativeEvent.data.code, [
            {text: 'OK', onPress: () => this._startScan()},
        ])
    }

    _startScan = (e) => {
        this._barCode.startScan()
    }

    _stopScan = (e) => {
        this._barCode.stopScan()
    }

}

export default TimerEnhance(BarcodeTest)

Props

Prop Type Optional Default Description
barCodeTypes array Yes determines the supported barcodeTypes
scannerRectWidth number Yes 255 determines the width of scannerRect
scannerRectHeight number Yes 255 determines the height of scannerRect
scannerRectTop number Yes 0 determines the top shift of scannerRect
scannerRectLeft number Yes 0 determines the left shift of scannerRect
scannerLineInterval number Yes 3000 determines the interval of scannerLine's movement
scannerRectCornerColor string Yes #09BB0D determines the color of scannerRectCorner

react-native-smart-barcode's People

Contributors

cyqresig avatar puti94 avatar

Stargazers

 avatar

Watchers

 avatar

Forkers

walker-lone

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.