在網(wǎng)上找了很多資料,沒有找到純凈簡單的代碼,別人封裝好的對于新人是不適合的
網(wǎng)上找了兩個相關(guān)的庫react-native-camera 和 react-native-barcodescanner ,看別人的博客講react-native-camera 主要是用來調(diào)用攝像頭的邪狞，Android iOS 都可以用，但是識別條形碼的功能只有 ios 有急波，而react-native-barcodescanner 直接只支持 android,
后面發(fā)現(xiàn)了一個第三方 react-native-barcode-scanner-universal說是支持安卓和iOS,但是到目前只能iOS運(yùn)行,Android不能運(yùn)行原因還沒找到,
最最最討厭寫博放代碼不給全的人,所以以下代碼是全部代碼以及步驟:
-iOS端為例
1, 終端cd到項(xiàng)目目錄下,運(yùn)行一下以下命令
npm install react-native-camera 或 yarn add react-native-camera
npm install react-native-barcodescanner 或 yarn add react-native-barcodescanner
npm install -g rnpm
(***rnpm 的全名是『react native Package Manager』)
rnpm link react-native-camera
rnpm link react-native-barcodescanner
項(xiàng)目文件:
import React,{Component} from 'react';
import BarcodeScanner from 'react-native-barcode-scanner-universal'
import {
AppRegistry,
View,
Text,
StyleSheet,
Platform,
} from 'react-native';
export default class ScanCode extends Component {
static navigationOptions = {
headerTitle: '二維碼掃碼Demo',
};
constructor(props) {
super(props);
this.state = {
code: "None"
};
this._show = this._show.bind(this);
}
render() {
let scanArea = null;
if (Platform.OS === 'ios') {
scanArea = (
<View style={styles.rectangleContainer}>
<View style={styles.rectangle} />
</View>
)
}
return (
//官方demo上BarcodeScanner外面還包了層View,但是會有一個問題,看不到相機(jī)頁面,但是掃碼正常,后面我就直接把BarcodeScanner外層的View給掉了,結(jié)果就好了
<BarcodeScanner
onBarCodeRead={ (code) => this._show(code)}
style={styles.camera}>
//********相機(jī)頁面添加組件在這里******
{scanArea}
</BarcodeScanner>
)
}
_show(val) {
this.setState({
code:val.data,
});
alert(val.data);
}
};
var styles = StyleSheet.create({
camera: {
flex: 1,
marginTop:0,
},
rectangleContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent'
},
rectangle: {
height: 250,
width: 250,
borderWidth: 2,
borderColor: '#00FF00',
backgroundColor:'transparent',
}
})
var Dimensions = require('Dimensions');
var widthd = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
真機(jī)調(diào)試遇到的問題:
1.由于iOS涉及到相機(jī)權(quán)限獲取問題,所以使用XCode打開項(xiàng)目后,在項(xiàng)目的Info.plist文件中添加
<key>NSPhotoLibraryUsageDescription</key>
<string>此 App 需要您的同意才能讀取媒體資料庫</string>
<key>NSCameraUsageDescription</key>
<string>cameraDesciption</string>
<key>NSContactsUsageDescription</key>
<string>contactsDesciption</string>
<key>NSMicrophoneUsageDescription</key>
<string>microphoneDesciption</string>
2.運(yùn)行報(bào)錯:Code signing is required for product type 'Unit Test Bundle' in SDK 'iOS 8.0'
解決:給項(xiàng)目選擇Team
