"React Native" two-dimensional code scanning

1. Preface
Today introduced react native to realize the function of QR code scanning. First, we need to use the third-party plug-in react-native-barcode-scanner-universal to achieve cross-platform QR code scanning.

2. Introduction

React-native-barcode-scanner-universal

React-native-barcode-scanner-universal is a combination of React-native-barcodescanner and React-native-camera, The React-native-barcodescanner is applied to the Android platform, and React-native-camera is applied to the iOS platform.

3. Usage examples

1) Installation: NPM Install React-native-barcode-scanner-universal--save

2) associated native libraries: react-native-barcodescanner andreact-native-camera

which RNPM | | NPM Install-g rnpmrnpm link react-native-camerarnpm link react-native-barcodescanner

3) can be manually associated, it is recommended to automatically associate with the 2nd step. Manual Correlation Reference:

HTTPS://github.com/lwansbrough/react-native-camera#manual-installhttps://  Github.com/ideacreation/react-native-barcodescanner#installation

4) After successful association, the Mainapplication.java Code of Android project needs to be modified.

 Import com.eguma.barcodescanner.barcodescannerpackage;//Importing

 Public class extends Implements reactapplication {    //  (...)     @Override    protected list<reactpackage> getpackages () {        return arrays.<reactpackage>aslist (        new  mainreactpackage (),         New  barcodescannerpackage ()//Add this statement      );}    }

5) use in react native

Import React, {Component} from ' React 'Import {appregistry, StyleSheet, Text, View} from' React-native '; import Barcodescanner from' React-native-barcode-scanner-universal 'Exportdefaultclass QRCode extends Component {//Parse data Parsedata (pdata) {varPType =Pdata.type; vardata =Pdata.data; Fetch (data). Then ((response)=Response.json ()). Then (Responsejson)={console.log (Responsejson); })          .Catch(Error) ={console.error (error);  }); } render () {Let Scanarea=NULLScanarea= (        <view style={styles.rectanglecontainer}> <view Style={styles.rectangle}/> </View>    )    return (      <Barcodescanner Onbarcoderead={ This. Parsedata.bind ( This)} style={Styles.camera}>{Scanarea}</BarcodeScanner>    ); }}const Styles=stylesheet.create ({camera: {flex:1}, Rectanglecontainer: {flex:1, Alignitems:' Center ', Justifycontent:' Center ', BackgroundColor:' Transparent '}, Rectangle: {height:250, Width:250, BorderWidth:2, BorderColor:' #00FF00 ', BackgroundColor:' Transparent '  }});

4. Effects

Data printed after a successful scan

"React Native" two-dimensional code scanning