Um componente gerador de código QR leve e de alto desempenho para React Native, desenvolvido pelo mecanismo de renderização Skia.
Gere seu QR Code em menos de 30 segundos usando qrcode.reactivive.io.
Antes de instalar o pacote, certifique-se de ter instalado o RN Skia.
yarn add @shopify/react-native-skia
Então, você pode instalar o pacote:
yarn add react-native-qrcode-skia
Você pode precisar de um componente QRCode muito simples em seu aplicativo e pode conseguir isso usando os adereços básicos (valor e tamanho). Aqui está um exemplo:
import QRCode from 'react-native-qrcode-skia' ;
const App = ( ) => {
return (
< QRCode
value = "https://patreon.com/reactiive"
size = { 200 }
/ >
) ;
} ;
export default App ;
Nos bastidores, o QRCode é essencialmente um Skia Path. Isso significa que a personalização é simples usando o suporte 'filhos'. Aqui está um exemplo:
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 ;
value
(string) - O valor codificado no QRCode.
style
(StyleProp, opcional) - O estilo aplicado ao contêiner QRCode.
errorCorrectionLevel
(ErrorCorrectionLevelType, opcional) – O nível de correção de erros do QRCode. Nível L: 7%, nível M: 15%, nível Q: 25%, nível H: 30%. O valor padrão é 'H'.
color
(string, opcional) - A cor do caminho base do QRCode. O valor padrão é '#000000'.
strokeWidth
(número, opcional) - A porcentagem do StrokeWidth (0 a 1). O valor padrão é 1.
children
(React.ReactNode, opcional) - Os componentes filhos renderizados no contêiner QRCode.
pathStyle
('fill' | 'stroke', opcional) - O estilo do caminho do QRCode: 'fill' ou 'stroke'. O valor padrão é 'traço'.
padding
(número, opcional) - O preenchimento aplicado ao redor do QRCode. O valor padrão é 0.
size
(número) – O tamanho do QRCode.
shapeOptions
(ShapeOptions, opcional) - As opções de forma para o caminho do QRCode. O valor padrão é {}. As opções de forma incluem:
shape
(BaseShapeOptions, opcional) – A forma dos elementos do código QR. Pode ser 'quadrado', 'círculo', 'arredondado', 'diamante', 'triângulo' ou 'estrela'. O padrão é 'arredondado'.eyePatternShape
(BaseShapeOptions, opcional) - A forma dos padrões dos olhos. Pode ser 'quadrado', 'círculo', 'arredondado', 'diamante', 'triângulo' ou 'estrela'. O padrão é 'arredondado'.gap
(número, opcional) - A lacuna entre os elementos do código QR. O padrão é 0.eyePatternGap
(número, opcional) - A lacuna nos padrões dos olhos. O padrão é 0. logoAreaSize
(número, opcional) - O tamanho da área do logotipo dentro do QRCode.
logo
(React.ReactNode, opcional) - O componente do logotipo a ser renderizado no QRCode.
Se você gosta do meu trabalho e quer me apoiar, a maneira mais fácil é se inscrever no meu canal no YouTube. Parece uma tarefa fácil, mas significa muito para mim.
Consulte o guia de contribuição para saber como contribuir com o repositório e o fluxo de trabalho de desenvolvimento.
MIT
Feito com biblioteca create-react-native