Ein QR-Code-Generator für React Native

Blog

Ein QR-Code-Generator für React Native

reagieren-native-qrcode-svg

Ein QR-Code-Generator für React Native basierend auf React-native-svg und Javascript-qrcode.

Diskussion: https://discord.gg/RvFM97v

Merkmale

  • QR-Code-Bilder einfach rendern
  • Optional ein Logo einbetten
Android ios

Installation

Abhängigkeitspakete installieren

yarn add react-native-svg react-native-qrcode-svg

Oder

npm i -S react-native-svg react-native-qrcode-svg

Wenn Sie |_+_| . verwenden gehe in den Ordner dein-projekt/ios und führen Sie |_+_| aus, und Sie sind fertig.

Wenn nicht, verwenden Sie eine der folgenden Methoden zum Verknüpfen.

Verknüpfen mit |_+_|

Wenn Sie |_+_| verwenden, verknüpfen Sie das native Projekt:

React Native 0.60.+

Beispiele

pod install react-native link

Requisiten

Name Standard Beschreibung
Größe 100 Größe des gerenderten Bildes in Pixel
Wert „Dies ist ein QR-Code“ String Wert des QR-Codes. Kann auch ein Array von Segmenten akzeptieren, wie in definiert Manueller Modus . Ex. [{ Daten: ‚ABCDEFG‘, Modus: ‚alphanumerisch‘ }, { Daten: ‚0123456‘, Modus: ‚numerisch‘ }, { Daten: [253,254,255], Modus: ‚Byte‘ }]
Farbe 'Schwarz' Farbe des QR-Codes
Hintergrundfarbe 'Weiß' Farbe des Hintergrunds
enableLinearGradient falsch aktiviert oder deaktiviert den linearen Gradienten
linearGradient [‘rgb(255,0,0)’,‘rgb(0,255,255)’] Array von 2 RGB-Farben, die verwendet werden, um den linearen Farbverlauf zu erstellen
gradientRichtung [170,0,0,0] die Richtung des linearen Gradienten
Logo Null Bildquellenobjekt. Ex. {uri: ‘base64string’} oder {require(’pathToImage’)}
LogoGröße 20% der Größe Größe des aufgedruckten Logos. Größeres Logo = weniger Fehlerkorrektur im QR-Code
logoHintergrundFarbe Hintergrundfarbe Das Logo bekommt mit dieser Farbe einen gefüllten quadratischen Hintergrund. Verwenden Sie „transparent“, wenn Ihr Logo bereits einen eigenen Hintergrund hat.
logoMargin 2 Abstand des Logos zu seiner Hülle
logoBorderRadius 0 der Randradius des Logobildes (Android wird nicht unterstützt)
Ruhezone 0 Ruhezone um den qr in Pixeln (nützlich beim Speichern des Bildes in der Galerie)
Schlag Null Holen Sie sich die SVG-Ref für die weitere Verwendung
ecl 'M' Fehlerkorrekturstufe
onError(Fehler) nicht definiert Rückruf ausgelöst, wenn während der Codegenerierung eine Ausnahme aufgetreten ist

Generierten Code in der Galerie speichern

Hinweis: Nur experimentell (nicht auf iOS getestet), verwendet getRef() und benötigt RNFS-Modul

npm install --save React-native-fs

Beispiel für Android:

import { CameraRoll , ToastAndroid } from 'react-native' import RNFS from 'react-native-fs' ... saveQrToDisk() { this.svg.toDataURL((data) => { RNFS.writeFile(RNFS.CachesDirectoryPath+'/ some-name.png'>react-native-svg    

Abhängigkeiten


Wenn Ihnen dieses Projekt gefällt, denken Sie bitte daran, mir einen Kaffee zu kaufen :)

https://www.buymeacoffee.com/LquC7mid5

Download-Details:

Autor: tolljerry

Quellcode: https://github.com/awesomejerry/react-native-qrcode-svg

#reagieren-nativ #reagieren #mobile-apps