• 本文為 Marno 原創，轉載必須保留出處！
• 公眾號 aMarno，關注後回覆 RN 加入交流群

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.屬性列表

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 倉庫的更新。

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