React Native 二維碼掃描組件

---

---

 

學rn得朋友們，你們知道rn開源項目嗎？來吧看這裡：http://www.marno.cn/(rn開源項目)

React Native學習之路(9) - 註冊登錄驗證的實現 + (用Fetch實現post請求) + （倒計時驗證碼）+(父子組件通信)+(asyncStorage非同步存儲) +（TextInput文本輸入框）:http://www.jianshu.com/p/7c81e122276b

 

ReactNative學習筆記七之圖表組件交互（上）:http://www.jianshu.com/p/b103a83d7840

 

React Native之ListView實現九宮格效果 :http://blog.csdn.net/xiangzhihong8/article/details/53572824

 

1.前言

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

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

2.特性

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

3.截圖預覽

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 去看，地址在這裡：https://github.com/MarnoDev/AC-QRCode-RN

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