我們知道在android原生開發中，我們經常要用到二維碼掃描的功能，在微信、QQ、浏覽器、名片全能王、淘寶、支付寶等等軟體裡面，都會用到，android裡面我們最常用的就是zxing，而在RN裡面也有類似的元件，感謝作者ideacreation/react-native-barcodescanner，剛好我的原項目裡面有個二維碼掃描付款的功能，現在我用RN來大緻示範下如何掃描二維碼，并把掃描後的結果傳回給第一個頁面。
一、建立一個項目，cd進入項目内，然後打開終端輸入：npm i --save react-native-barcodescanner
二、等安裝完畢後：輸入 rnpm link;有些同學會提示找到不到rnpm這個指令，你有兩種解決方案：
第一、輸入 npm i -g rnpm --save先安裝rnpm，然後再輸入rnpm link自動添加依賴；
第二、不用安裝rnpm，直接輸入 react-native link，一樣可以添加依賴。
三、然後把https://github.com/ideacreation/react-native-barcodescanner/blob/master/Examples/BarcodeScanner/index.android.js裡面的内容拷貝到我們的項目裡面，然後進行修改：
我的修改内容如下：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Vibration,
View
} from 'react-native';
import BarcodeScanner from 'react-native-barcodescanner';
export default class Barcode extends Component {
constructor(props) {
super(props);
this.state = {
barcode: '',
cameraType: 'back',
text: '掃描二維碼',
torchMode: 'off',
type: '',
};
}
barcodeReceived(e) {
if (e.data !== this.state.barcode || e.type !== this.state.type) Vibration.vibrate();
this.setState({
barcode: e.data,
text: `${e.data} (${e.type})`,
type: e.type,
});
const {navigator}=this.props;
if (this.props.getUrl) {
let url = this.state.text;
this.props.getUrl(url);
}
if (navigator) {
navigator.pop({
name:'barcode'
})
}
}
render() {
return (
<View style={styles.container}>
<BarcodeScanner
onBarCodeRead={this.barcodeReceived.bind(this)}
style={{ flex: 1 }}
torchMode={this.state.torchMode}
cameraType={this.state.cameraType}
/>
<View style={styles.statusBar}>
<Text style={styles.statusBarText}>{this.state.text}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
statusBar: {
height: 100,
alignItems: 'center',
justifyContent: 'center',
},
statusBarText: {
fontSize: 20,
},
});
其中state裡面的barcode是掃描後的資料；
cameraType是錄影機的類型，表示用前置錄影機還是後置錄影機；
text是掃描後的文本；
barcodeReceived(e)是掃描後接受的函數，接受參數為e，資料都在e裡面，
我上面采用的是當接收到參數後，把這個text傳遞給第一個頁面，同時把這個頁面給pop掉，
第一個頁面的内容如下：
import React, { Component } from 'react';
import {
StyleSheet,
Text,
Image,
View,
Dimensions,
TouchableOpacity,
Navigator
} from 'react-native';
const {width,height}= Dimensions.get('window');
import Barcode from './barcode';
class PurchaseMain extends Component {
constructor(props) {
super(props);
this.state = {
username:'無名氏',
barcodeResult:''
};
}
render() {
return (
<View style={styles.container}>
<View style={styles.top}>
<Image source={require('../../images/purchasetop.png')} style={styles.topimage}/>
<Text style={{fontSize:14,color:'black'}}>{this.state.username}</Text>
</View>
<TouchableOpacity onPress={this.toBarCodePage} style={styles.centerbg}>
<View >
<Image source={require('../../images/purchasecenter.png')} style={styles.center}/>
<Text style={{fontSize:12,color:'white'}}>付款掃描</Text>
</View>
</TouchableOpacity>
<Text>這裡是二維的結果：</Text>
<Text>{this.state.barcodeResult}</Text>
</View>
);
}
toBarCodePage=()=>{
const {navigator}=this.props;
const self = this;
if (navigator) {
navigator.push({
name:'barcode',
component:Barcode,
params:{
//從詳情頁擷取掃描的結果url
getUrl:(url)=>{
self.setState({
barcodeResult:url
})
}
}
})
}
}
}
export default class Purchase extends Component{
render(){
return(
<Navigator
initialRoute={{name:'purchase',component:PurchaseMain}}
renderScene={
(route, navigator) =>
{
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}
}/>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent:'center',
alignItems:'center'
},
top:{
position:'absolute',
marginTop:-20,
top:0,
left:0,
justifyContent:'center',
alignItems:'center',
},
topimage:{
resizeMode:'contain',
height:height/3,
width:width,
marginBottom:10
},
centerbg:{
position:'absolute',
bottom:(width-150)/2,
left:(width-150)/2,
backgroundColor:'#ec6638',
width:150,
height:150,
borderRadius:75,
justifyContent:'center',
alignItems:'center',
},
center:{
width:60,
height:60,
marginBottom:10
}
});
state裡面的barcodeResult就是掃描的結果
大家可以上進我的github上，把這個工程下載下傳下來，在android手機上運作下：
我的項目位址：https://github.com/LiuC520/react-native-jifenmao
下載下傳運作步驟：
1、先 Git clone https://github.com/LiuC520/React-Native-jifenmao
2、cd React-Native-jifenmao
3、安裝庫檔案：npm install
4、安裝依賴：react-native link
5、react-native run-android 然後就可以運作了
