(七)ReactNative实现二维码扫描

本章转载: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')

}

1. 在你的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" />