自定義 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 群交流。