react-native-barcodescanner調用實作二維碼掃描

react-native-barcodescanner調用實作二維碼掃描

demo: http://download.csdn.net/detail/keen_zuxwang/9837091

指令行建立項目工程、安裝、關聯元件

react-native-barcodescanner component:

https://github.com/ideacreation/react-native-barcodescanner

react-native init myrnbarcode
cd myrnbarcode
npm install react-native-barcodescanner --save 
// link元件
react-native link react-native-barcodescanner 
           

配置android工程

首先在android目錄下加入local.properties(指令行建立工程，預設不包含該檔案，指定android工程sdk目錄sdk.dir)

android/settings.gradle 中添加：

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

b、android/app/build.gradle 中添加：

dependencies {
    compile project(':react-native-barcodescanner') // 添加
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}
           

c、android/app/src/main/AndroidManifest.xml 中添加：

通路權限：

<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.RECORD_VIDEO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
           

b、android/app/src/main/java/[…]/MainApplication.java 中添加：

import com.eguma.barcodescanner.BarcodeScannerPackage; //添加

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RCTCameraPackage() // 添加
      );
    }
           

index.android.js 添加功能實作(導入相關功能元件)：

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  Text
} from 'react-native';

import BarcodeScanner from 'react-native-barcodescanner';

class BarcodeScannerApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
      torchMode: 'off',
      cameraType: 'back',
      bardata: ''
    };
  }

  barcodeReceived(e) {
    console.log('Barcode: ' + e.data);
    console.log('Type: ' + e.type);
    this.setState({bardata:'Barcode: ' + e.data});
  }

  render() {
    return (
      <View style={styles.container}>
      <BarcodeScanner
        onBarCodeRead={this.barcodeReceived.bind(this)}
        style={{ flex:  }}
        torchMode={this.state.torchMode}
        cameraType={this.state.cameraType}
      />
      <Text style={styles.capture}>{this.state.bardata}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: ,
    flexDirection: 'column',
  },
  preview: {
    flex: ,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#8f8',
    fontSize: ,
    padding: 
  },
  capture: {
    flex: ,
    backgroundColor: '#fff',
    borderRadius: ,
    color: '#000',
    padding: ,
    margin: 
  }
});

AppRegistry.registerComponent('myrnbarcode', () => BarcodeScannerApp);
           

指令行執行(即開啟packager, Running packager on port 8081)：

react-native start
           

指令行執行(連接配接android真機/模拟器，新開指令視窗，進入到項目myrncamera2目錄下，輸入如下指令)：