react native qrcode skia

¿Reaccionar código QR nativo Skia?

Un componente generador de códigos QR liviano y de alto rendimiento para React Native, impulsado por el motor de renderizado Skia.

Genera tu código QR en menos de 30 segundos usando qrcode.reactiive.io.

demostración-qrcode-x.mp4

Instalación

Antes de instalar el paquete, asegúrese de haber instalado RN Skia.

yarn add @shopify/react-native-skia

Luego, puedes instalar el paquete:

yarn add react-native-qrcode-skia

Uso

Es posible que necesite un componente QRCode muy simple en su aplicación y puede lograrlo utilizando los accesorios básicos (valor y tamaño). Aquí hay un ejemplo:

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

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

export default App ;

Debajo del capó, el QRCode es esencialmente un Skia Path. Esto significa que la personalización es sencilla utilizando el accesorio "niños". He aquí un ejemplo:

 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 ; 

Accesorios

• value (cadena): el valor codificado en el código QR.

• style (StyleProp, opcional): el estilo aplicado al contenedor QRCode.

• errorCorrectionLevel (ErrorCorrectionLevelType, opcional): el nivel de corrección de errores para el código QR. Nivel L: 7%, nivel M: 15%, nivel Q: 25%, nivel H: 30%. El valor predeterminado es 'H'.

• color (cadena, opcional): el color de la ruta base del código QR. El valor predeterminado es '#000000'.

• strokeWidth (número, opcional): el porcentaje del StrokeWidth (0 a 1). El valor predeterminado es 1.

• children (React.ReactNode, opcional): los componentes secundarios representados dentro del contenedor QRCode.

• pathStyle ('relleno' | 'trazo', opcional): el estilo de la ruta del código QR: 'relleno' o 'trazo'. El valor predeterminado es "trazo".

• padding (número, opcional): el relleno aplicado alrededor del código QR. El valor predeterminado es 0.

• size (número): el tamaño del código QR.

• shapeOptions (ShapeOptions, opcional): las opciones de forma para la ruta del código QR. El valor predeterminado es {}. Las opciones de forma incluyen:

  • shape (BaseShapeOptions, opcional): la forma de los elementos del código QR. Puede ser "cuadrado", "círculo", "redondeado", "diamante", "triángulo" o "estrella". El valor predeterminado es "redondeado".
  • eyePatternShape (BaseShapeOptions, opcional): la forma de los patrones de ojos. Puede ser "cuadrado", "círculo", "redondeado", "diamante", "triángulo" o "estrella". El valor predeterminado es "redondeado".
  • gap (número, opcional): la brecha entre los elementos del código QR. El valor predeterminado es 0.
  • eyePatternGap (número, opcional): el espacio en los patrones de los ojos. El valor predeterminado es 0.

• logoAreaSize (número, opcional): el tamaño del área del logotipo dentro del código QR.

• logo (React.ReactNode, opcional): el componente del logotipo que se representará dentro del QRCode.

¿Quieres apoyarme?

Si te gusta mi trabajo y quieres apoyarme, la forma más sencilla es suscribirte a mi canal de YouTube. Parece una tarea fácil, pero significa mucho para mí.

Otras formas de apoyarme y obtener contenido exclusivo:

• Mi curso (Reanimate.dev): ¿Realmente te gustan las animaciones? ¡Fantástico! Esto nos hace dos. Aquí puedes acceder a mi curso de animaciones de React Native y aprender cómo mejorar tus habilidades de animación.
• Patreon: Cada semana, desde hace un par de años, comparto una nueva animación especial con mis patrocinadores. Si quieres acceder a todos ellos, puedes convertirte en Patrono.

Contribuyendo

Consulte la guía de contribución para aprender cómo contribuir al repositorio y al flujo de trabajo de desarrollo.

Licencia

MIT

---

Hecho con create-react-native-library