react-native-barcodescanner调用实现二维码扫描
demo: /detail/keen_zuxwang/9837091
命令行创建项目工程、安装、关联组件
react-native-barcodescanner component:
/ideacreation/react-native-barcodescanner
react-native init myrnbarcodecd myrnbarcodenpm 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; //添加@Overrideprotected 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}><BarcodeScanneronBarCodeRead={this.barcodeReceived.bind(this)}style={{ flex: 1 }}torchMode={this.state.torchMode}cameraType={this.state.cameraType}/><Text style={styles.capture}>{this.state.bardata}</Text></View>);}}const styles = StyleSheet.create({container: {flex: 1,flexDirection: 'column',},preview: {flex: 0,justifyContent: 'center',alignItems: 'center',backgroundColor: '#8f8',fontSize: 20,padding: 10},capture: {flex: 0,backgroundColor: '#fff',borderRadius: 5,color: '#000',padding: 10,margin: 40}});AppRegistry.registerComponent('myrnbarcode', () => BarcodeScannerApp);
命令行执行(即开启packager, Running packager on port 8081)：
react-native start
命令行执行(连接android真机/模拟器，新开命令窗口，进入到项目myrncamera2目录下，输入如下指令)：
react-native run-android
如果觉得《react-native-barcodescanner调用实现二维码扫描》对你有帮助，请点赞、收藏，并留下你的观点哦！
