本章转载: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" />