自定義 React Native 二維碼掃描組件(簡單，易用！)

• 本文爲 Marno 原創，轉載必須保留出處！
• 公衆號 aMarno，關注後回覆 RN 加入交流羣
• React Native 優秀開源項目大全：www.marno.cn

---

1.前言

最近用 React Native 仿寫了一下 ofo 應用，涉及到了二維碼掃描的功能，在 github 上搜了一下，也沒發現一個趁手的二維碼掃描組件，因此乾脆本身動手寫了一個。

其中使用攝像頭實時掃描二維碼進行解析的功能，已經經過 react-native-camera 這個庫實現了，因此我也只是寫了一個能夠自定義樣式的掃描界面，爲了使用方便，我已經將其封裝成組件，上傳到了 NPM 服務器，下面就大概說一下實現過程以及使用方法。

2.特性

• 兼容 RN0.4.0+ 的版本
• 兼容 Android 和 iOS 平臺
• 支持二維碼、條形碼掃描
• 輕鬆實現各類掃描界面

3.截圖預覽

Twitter	WeChat	OFO
QQBrowser	Gif1	Gif2

4.安裝

//第一步
npm install ac-qrcode --save
//第二步（react-native-camera 須要 link 後才能使用）
react-native link
PS：若是 link 沒有成功，會報錯。若是沒有自動 link，能夠手動 link

5.基本使用

import { QRScannerView } from 'ac-qrcode';

export default class DefaultScreen extends Component {
    render() {
        return (
            < QRScannerView onScanResultReceived={this.barcodeReceived.bind(this)} renderTopBarView={() => this._renderTitleBar()} renderBottomMenuView={() => this._renderMenu()} /> ) } _renderTitleBar(){ return( <Text style={{color:'white',textAlignVertical:'center', textAlign:'center',font:20,padding:12}} >這裏添加標題</Text> ); } _renderMenu() { return ( <Text style={{color:'white',textAlignVertical:'center', textAlign:'center',font:20,padding:12}} >這裏添加底部菜單</Text> ) } barcodeReceived(e) { Toast.show('Type: ' + e.type + '\nData: ' + e.data); //console.log(e) } }複製代碼

6.屬性列表

屬性名	類型	默認值	可選	描述
maskColor	string	#0000004D	true	遮罩顏色
borderColor	string	#000000	true	邊框顏色
cornerColor	string	#000000	true	轉角顏色
borderWidth	number	0	true	邊框寬度
cornerBorderWidth	number	4	true	轉角寬度
cornerBorderLength	number	20	true	轉角長度
rectHeight	number	200	true	掃描狂高度
rectWidth	number	200	true	掃描狂寬度
isCornerOffset	bool	false	true	轉角是否偏移
cornerOffsetSize	number	0	true	轉角偏移量
bottomMenuHeight	number	0	true	底部操做菜單高度
scanBarAnimateTime	number	2500	true	掃描線移動速度
scanBarColor	string	#22ff00	true	掃描線顏色
scanBarImage	any	null	true	使用圖片掃描線
scanBarHeight	number	1.5	true	掃描線高度
scanBarMargin	number	6	true	掃描線距掃描狂邊距
hintText	string	將二維碼/條碼放入框內， 便可自動掃描	true	提示文本
hintTextStyle	object	{ color: '#fff', fontSize: 14, backgroundColor:'transparent'}	true	提示文字樣式
hintTextPosition	number	130	true	提示文字位置
isShowScanBar	bool	true	true	是否顯示掃描條
bottomMenuStyle	object	-	true	底部菜單樣式
renderTopBarView	func	-	flase	繪製頂部操做條組件
renderBottomMenuView	func	-	false	繪製底部操做條組件
onScanResultReceived	func	-	false	掃描結果回調

7.實現簡述

掃描界面能夠分爲 4 個部分：頂部標題欄，底部操做欄，遮罩層，掃描框。其中頂部標題欄和底部操做欄都是經過暴露方法讓用戶本身添加的。只有遮罩層和掃描框是傳入參數進行設置的。上一張圖大概說一下整個界面結構。

組件代碼結構以下，基本是經過使用絕對定位的 View 實現的佈局

<View>
    <Camera> {/*頂部標題欄*/} <TopBarView /> <View> {/*掃描框部分*/} <View> {/*掃描框邊線*/} <View> {/*掃描條及動畫*/} <Animated.View> </View> {/*掃描框轉角-左上*/} <View /> {/*掃描框轉角-右上*/} <View /> {/*掃描框轉角-左下*/} <View /> {/*掃描框轉角-右下*/} <View /> </View> {/*遮罩-上*/} <View /> {/*遮罩-左*/} <View /> {/*遮罩-右*/} <View /> {/*遮罩-下*/} <View /> {/*提示文字*/} <HintTextView /> </View> {/*底部操做欄*/} <BottomMenuView> </Camera> </View>複製代碼

詳細代碼比較長，就不一一列出來解釋了。主要也比較簡單，感受沒啥好說的，就是經過計算組件在屏幕上的座標位置，進行對應的大小設置而已。感興趣的能夠直接跳轉到 github 去看，地址在這裏：github.com/MarnoDev/AC…

順便提醒一下，由於目前尚未進行優化，因此打開掃碼界面的速度感受會有一些慢，後面有時間會對這些細節進行優化的，具體能夠關注個人公衆號獲取，或者留意下後面我在 github 倉庫的更新。

---

獲取更過 RN 乾貨，歡迎關注公衆號 aMarno 。也歡迎加入 RN 羣交流。