react native qrcode skia Download - react native qrcode skia -Download

react native qrcode skia

Anderer Quellcode

Release 0.3.0

Herunterladen

Reagieren Sie auf nativen QRCode Skia?

Eine leichte und leistungsstarke QR-Code-Generatorkomponente für React Native, unterstützt von der Skia-Rendering-Engine.

Generieren Sie Ihren QR-Code in weniger als 30 Sekunden mit qrcode.reactiviive.io.

demo-qrcode-x.mp4

Installation

Stellen Sie vor der Installation des Pakets sicher, dass Sie RN Skia installiert haben.

yarn add @shopify/react-native-skia

Anschließend können Sie das Paket installieren:

yarn add react-native-qrcode-skia

Verwendung

Möglicherweise benötigen Sie eine sehr einfache QRCode-Komponente in Ihrer App und können dies erreichen, indem Sie die grundlegenden Requisiten (Wert und Größe) verwenden. Hier ist ein Beispiel:

 import QRCode from 'react-native-qrcode-skia' ;

const App = ( ) => {
  return (
    < QRCode
      value = "https://patreon.com/reactiive"
      size = { 200 }
    / >
  ) ;
} ;

export default App ;

Unter der Haube ist der QRCode im Wesentlichen ein Skia-Pfad. Dies bedeutet, dass die Anpassung mithilfe der „Kinder“-Requisite unkompliziert ist. Hier ist ein Beispiel:

 import QRCode from 'react-native-qrcode-skia' ;

const App = ( ) => {
  return (
    < QRCode
      value = "https://patreon.com/reactiive"
      size = { 200 }
      shapeOptions = { {
        shape : "circle" ,
        eyePatternShape : "rounded" ,
        eyePatternGap : 0 ,
        gap : 0
      } }
      logoAreaSize = { 70 }
      logo = {
        < View style = { {
          height : 50 ,
          aspectRatio : 1 ,
          justifyContent : 'center' ,
          alignItems : 'center' ,
        } } >
          < Text style = { { fontSize : 38 } } > ? < / Text >
        < / View >
      }
    >
      < RadialGradient c = { { x : 100 , y : 100 } } r = { 100 } colors = { [ "#eeca3b" , "#ee3b83" ] } / >
    < / QRCode >
  ) ;
} ;

export default App ;

Requisiten

value (string) – Der im QRCode codierte Wert.
style (StyleProp, optional) – Der auf den QRCode-Container angewendete Stil.
errorCorrectionLevel (ErrorCorrectionLevelType, optional) – Die Fehlerkorrekturstufe für den QRCode. Stufe L: 7 %, Stufe M: 15 %, Stufe Q: 25 %, Stufe H: 30 %. Der Standardwert ist „H“.
color (Zeichenfolge, optional) – Die Farbe des QRCode-Basispfads. Der Standardwert ist „#000000“.
strokeWidth (Zahl, optional) – Der Prozentsatz der StrokeWidth (0 bis 1). Der Standardwert ist 1.
children (React.ReactNode, optional) – Die untergeordneten Komponenten, die im QRCode-Container gerendert werden.
pathStyle („fill“ | „Stroke“, optional) – Der Stil des QRCode-Pfads: „fill“ oder „Stroke“. Der Standardwert ist „Strich“.
padding (Zahl, optional) – Die um den QRCode herum angewendete Polsterung. Der Standardwert ist 0.
size (Zahl) – Die Größe des QRCodes.
shapeOptions (ShapeOptions, optional) – Die Formoptionen für den QRCode-Pfad. Der Standardwert ist {}. Zu den ShapeOptions gehören:
- shape (BaseShapeOptions, optional) – Die Form der QR-Code-Elemente. Kann „Quadrat“, „Kreis“, „gerundet“, „Raute“, „Dreieck“ oder „Stern“ sein. Der Standardwert ist „gerundet“.
- eyePatternShape (BaseShapeOptions, optional) – Die Form der Augenmuster. Kann „Quadrat“, „Kreis“, „gerundet“, „Raute“, „Dreieck“ oder „Stern“ sein. Der Standardwert ist „gerundet“.
- gap (Zahl, optional) – Die Lücke zwischen QR-Code-Elementen. Der Standardwert ist 0.
- eyePatternGap (Zahl, optional) – Die Lücke in den Augenmustern. Der Standardwert ist 0.
logoAreaSize (Zahl, optional) – Die Größe des Logobereichs innerhalb des QRCodes.
logo (React.ReactNode, optional) – Die Logo-Komponente, die im QRCode gerendert werden soll.

Möchten Sie mich unterstützen?

Wenn Ihnen meine Arbeit gefällt und Sie mich unterstützen möchten, ist es am einfachsten, meinen YouTube-Kanal zu abonnieren. Das scheint eine leichte Aufgabe zu sein, aber sie bedeutet mir sehr viel.

Weitere Möglichkeiten, mich zu unterstützen und exklusive Inhalte zu erhalten:

Mein Kurs (Reanimate.dev): Interessieren Sie sich wirklich für Animationen? Fantastisch! Das macht uns zu zweit. Hier können Sie auf meinen React Native-Animationskurs zugreifen und lernen, wie Sie Ihre Animationsfähigkeiten verbessern können.
Patreon: Seit ein paar Jahren teile ich jede Woche eine neue Spezialanimation mit meinen Patrons. Wenn Sie auf alle zugreifen möchten, können Sie Patron werden.