react native qrcode skia

Réagir au QRCode natif Skia ?

Un composant générateur de code QR léger et performant pour React Native, alimenté par le moteur de rendu Skia.

Générez votre QR Code en moins de 30 secondes en utilisant qrcode.reactiviive.io.

démo-qrcode-x.mp4

Installation

Avant d'installer le package, assurez-vous d'avoir installé RN Skia.

yarn add @shopify/react-native-skia

Ensuite, vous pouvez installer le package :

yarn add react-native-qrcode-skia

Usage

Vous aurez peut-être besoin d'un composant QRCode très simple dans votre application et vous pouvez y parvenir en utilisant les accessoires de base (valeur et taille). Voici un exemple :

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

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

export default App ;

Sous le capot, le QRCode est essentiellement un Skia Path. Cela signifie que la personnalisation est simple à l'aide de l'accessoire « enfants ». Voici un exemple :

 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 ; 

Accessoires

• value (string) - La valeur codée dans le QRCode.

• style (StyleProp, facultatif) - Le style appliqué au conteneur QRCode.

• errorCorrectionLevel (ErrorCorrectionLevelType, facultatif) - Le niveau de correction d'erreur pour le QRCode. Niveau L : 7%, niveau M : 15%, niveau Q : 25%, niveau H : 30%. La valeur par défaut est « H ».

• color (string, facultatif) - La couleur du chemin de base du QRCode. La valeur par défaut est « #000000 ».

• strokeWidth (nombre, facultatif) - Le pourcentage de StrokeWidth (0 à 1). La valeur par défaut est 1.

• children (React.ReactNode, facultatif) - Les composants enfants rendus dans le conteneur QRCode.

• pathStyle ('fill' | 'Stroke', facultatif) - Le style du chemin QRCode : 'fill' ou 'Stroke'. La valeur par défaut est « AVC ».

• padding (numéro, facultatif) - Le remplissage appliqué autour du QRCode. La valeur par défaut est 0.

• size (number) - La taille du QRCode.

• shapeOptions (ShapeOptions, facultatif) - Les options de forme pour le chemin QRCode. La valeur par défaut est {}. Les options de forme incluent :

  • shape (BaseShapeOptions, facultatif) - La forme des éléments du code QR. Peut être « carré », « cercle », « arrondi », « diamant », « triangle » ou « étoile ». La valeur par défaut est « arrondi ».
  • eyePatternShape (BaseShapeOptions, facultatif) - La forme des motifs des yeux. Peut être « carré », « cercle », « arrondi », « diamant », « triangle » ou « étoile ». La valeur par défaut est « arrondi ».
  • gap (numéro, facultatif) - L'écart entre les éléments du code QR. La valeur par défaut est 0.
  • eyePatternGap (nombre, facultatif) - L'écart dans les motifs oculaires. La valeur par défaut est 0.

• logoAreaSize (nombre, facultatif) - La taille de la zone du logo dans le QRCode.

• logo (React.ReactNode, facultatif) - Le composant logo à restituer dans le QRCode.

Souhaitez-vous me soutenir ?

Si vous aimez mon travail et souhaitez me soutenir, le plus simple est de vous abonner à ma chaîne YouTube. Cela semble être une tâche facile, mais cela signifie beaucoup pour moi.

Autres moyens de me soutenir et d'obtenir du contenu exclusif :

• Mon cours (Reanimate.dev) : Vous aimez vraiment les animations ? Fantastique! Cela fait que nous sommes deux. Ici, vous pouvez accéder à mon cours d'animations React Native et apprendre à améliorer vos compétences en animations.
• Patreon : Chaque semaine, depuis quelques années, je partage une nouvelle animation spéciale avec mes mécènes. Si vous souhaitez accéder à tous, vous pouvez devenir mécène.

Contribuer

Consultez le guide de contribution pour savoir comment contribuer au référentiel et au workflow de développement.

Licence

MIT

---

Fabriqué avec la bibliothèque create-react-native