1. 程式人生 > >React Native WebView元件實現的BarCode(條形碼)、(QRCode)二維碼

React Native WebView元件實現的BarCode(條形碼)、(QRCode)二維碼

react-native-barCode

採用React Native WebView元件實現的BarCode(條形碼)、QRCode(二維碼),其中QRCode的程式碼是參考 qrcode,修復了qrcode圖片會出現滾動條問題。https://github.com/chenchunyong/react-native-barCode

實現的原理:在WebView元件下,用canvas元件畫出BarCode、QRCode。

Install

安裝包:

npm i react-native-barcode --save

通過引用import {BarCode,QRCode} from 'react-native-barcode-qrcode'

來使用

Usage

import {BarCode,QRCode} from 'react-native-barcode-qrcode'
<BarCode    value={this.props.payCode}
            width="225"
            height="90"
            bgColor="#e7e7eb"
           />
    <QRCode value={this.props.payCode}
            bgColor="#fff"
            fgColor="#333"/>

效果如下: