【React Native 實戰】二維碼掃描

標籤：gif   border   images   create   default   coder   span   div   .json   

1.前言
今天介紹React Native來實現二維碼掃描的功能。首先我們要藉助第三方外掛程式react-native-barcode-scanner-universal來實現跨平台二維碼掃描。

2.介紹

react-native-barcode-scanner-universal

react-native-barcode-scanner-universal是react-native-barcodescanner和react-native-camera的結合，react-native-barcodescanner應用於android平台，react-native-camera應用於iOS平台。

3.使用執行個體

1）安裝：npm install  react-native-barcode-scanner-universal --save

2) 關聯native庫：react-native-barcodescanner 和 react-native-camera

which rnpm || npm install -g rnpmrnpm link react-native-camerarnpm link react-native-barcodescanner

3）可以手動關聯，建議用第2步自動關聯。手動關聯參考：

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

4）關聯成功後，需要修改Android工程下的MainApplication.java代碼

import com.eguma.barcodescanner.BarcodeScannerPackage;//匯入

public class MainApplication extends Application implements ReactApplication {    // (...)    @Override    protected List<ReactPackage> getPackages() {      return Arrays.<ReactPackage>asList(        new MainReactPackage(),        new BarcodeScannerPackage() // add this statement      );    }}

5) react native中使用

import React, { Component } from ‘react‘;import {  AppRegistry,  StyleSheet,  Text,  View} from ‘react-native‘;import BarcodeScanner from ‘react-native-barcode-scanner-universal‘export default class qrcode extends Component {　//解析資料  parseData(pdata){      var ptype = pdata.type;      var data = pdata.data;      fetch(data)          .then((response) => response.json())          .then((responseJson) => {              console.log(responseJson);          })          .catch((error) => {              console.error(error);          });  }  render() {    let scanArea = null    scanArea = (        <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.效果

掃描成功後列印的資料

 

【React Native 實戰】二維碼掃描