你需要的 React Native 二維碼掃描組件

1前言

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

2特性

兼容 RN0.4.0+ 的版本

兼容 Android 和 iOS 平台

支持二維碼、條形碼掃描

輕鬆實現各種掃描界面

3截圖預覽

GIF/1201K

4安裝

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

5基本使用

import from ac-qrcode ; export default class DefaultScreen extends Component { render() { return (

this._renderTitleBar()} renderBottomMenuView ={() => this._renderMenu()} /> ) } _renderTitleBar(){ return( 這裡添加標題 ); } _renderMenu() { return ( 這裡添加底部菜單 ) } barcodeReceived(e) { Toast.show( Type: + e.type + Data: + e.data); } }

6基本屬性

8實現簡述

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

組件代碼結構如下，基本是通過使用絕對定位的 View 實現的布局

{/*頂部標題欄*/} {/*掃描框部分*/} {/*掃描框邊線*/} {/*掃描條及動畫*/} {/*掃描框轉角-左上*/} {/*掃描框轉角-右上*/} {/*掃描框轉角-左下*/} {/*掃描框轉角-右下*/} {/*遮罩-上*/} {/*遮罩-左*/} {/*遮罩-右*/} {/*遮罩-下*/} {/*提示文字*/} {/*底部操作欄*/}

詳細代碼比較長，就不一一列出來解釋了。主要也比較簡單，感覺沒啥好說的，就是通過計算組件在屏幕上的坐標位置，進行對應的大小設置而已。感興趣的可以直接跳轉到 github 去看，地址在這裡：https://github.com/MarnoDev/AC-QRCode-RN

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！