(七)ReactNative实现二维码扫描

来源：互联网发布：centos 安装 nginx 编辑：程序博客网时间：2024/06/03 12:18

本章转载:http://www.jianshu.com/p/d9c4ab7d1d5a
研究这个我一直研究了俩天，查资料，百度，头都大了：但是终于搞出来了：

1首先需要向工程中引入第三方的组件：react-native-barcodescanner

npm install react-native-barcodescanner --save

2.在你的android/settings.gradle下面加上：

include':react-native-barcodescanner'project(':react-native-barcodescanner').projectDir=newFile(rootProject.projectDir,'../node_modules/react-native-barcodescanner/android')

3.在你的android/app/build.gradle加上这个依赖

dependencies{...    compile project(':react-native-barcodescanner')}

在你的MainApplication.java文件中加入：

开头：加上 import com.eguma.barcodescanner.BarcodeScannerPackage;

然后在这个： ListgetPackages() 方法中加上

newBarcodeScannerPackage()

5.上代码：

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  Vibration,  View} from 'react-native';import BarcodeScanner from 'react-native-barcodescanner';export default class QrCode extends Component {  constructor(props){    super(props);    this.state= {      barcode: '',      camertType: 'back',      text: 'Scan Barcode',      torchMode: 'off',      type: '',    };  }  render() {    return(      <View style={styles.container}>        <BarcodeScanner          onBarCodeRead={this.barcodeReceived.bind(this)}          style={{ flex: 1}}          torchMode={this.state.torchMode}          camertType={this.state.camertType}/>          <View style={styles.statusBar}>            <Text style={styles.statusBarText}>{this.state.text}</Text>          </View>      </View>    );  }  barcodeReceived(e){    if(e.data !== this.state.barcode || e.type !==this.state.type){      this.setState({        barcode: e.data,        text: `${e.data}(${e.type})`,        type: e.type,      });    }  }}const styles = StyleSheet.create({  container: {    flex: 1,  },  statusBar: {    height: 100,    alignItems: 'center',    justifyContent: 'center',  },  statusBarText: {    fontSize: 20,  }});

如果以上东西运行编译后还是报了各种error，请看看我的第三篇踩坑集锦，如果没有一定莫急，自己看看error再去处理。
注意别忘记了添加权限：

    <!-- 摄像头扫描权限 -->    <uses-permission android:name="android.permission.CAMERA" />    <uses-permission android:name="android.permission.FLASHLIGHT" />    <uses-permission android:name="android.permission.VIBRATE" />

0 0