1前言

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

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

2特性

• 相容 RN0.4.0+ 的版本

• 相容 Android 和 iOS 平臺

• 支援二維碼、條形碼掃描

• 輕鬆實現各種掃描介面

3截圖預覽

Twitter

WeChat

QQBrowser

ofo

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                

6基本屬性

8實現簡述

掃描介面可以分為 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 去看，地址在這裡：https://github.com/MarnoDev/AC-QRCode-RN

順便提醒一下，因為目前還沒有進行優化，所以開啟掃碼介面的速度感覺會有一些慢，後面有時間會對這些細節進行優化的，具體可以關注我的公眾號獲取，或者留意下後面我在 github 倉庫的更新。