react native qrcode skia下载 - react native qrcode skia源码下载

react native qrcode skia

其他源码

Release 0.3.0

下载

反应本机 QRCode Skia ？

一个轻量级、高性能的 React Native 二维码生成器组件，由 Skia 渲染引擎提供支持。

使用 qrcode.reactive.io 在 30 秒内生成QR 码。

演示-qrcode-x.mp4

安装

在安装软件包之前，请确保您已经安装了 RN Skia。

yarn add @shopify/react-native-skia

然后，您可以安装该软件包：

yarn add react-native-qrcode-skia

用法

您的应用程序中可能需要一个非常简单的 QRCode 组件，您可以通过使用基本属性（值和大小）来实现这一点。这是一个例子：

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

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

export default App ;

在底层，QRCode 本质上是一个 Skia 路径。这意味着使用 'children' 属性可以直接进行自定义。这是一个例子：

 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) - QRCode 中编码的值。
style (StyleProp, 可选) - 应用于 QRCode 容器的样式。
errorCorrectionLevel （ErrorCorrectionLevelType，可选）- QRCode 的错误纠正级别。 L级：7%，M级：15%，Q级：25%，H级：30%。默认值为“H”。
color (字符串，可选) - QRCode 基本路径的颜色。默认值为“#000000”。
strokeWidth （数字，可选）- 笔画宽度的百分比（0 到 1）。默认值为 1。
children (React.ReactNode, 可选) - 在 QRCode 容器中呈现的子组件。
pathStyle ('fill' | 'lines', 可选) - QRCode 路径的样式：'fill' 或 'strike'。默认值为“行程”。
padding （数字，可选）- QRCode 周围应用的填充。默认值为 0。
size （数字）- QRCode 的大小。
shapeOptions （ShapeOptions，可选）-QRCode 路径的形状选项。默认值为 {}。形状选项包括：
- shape （BaseShapeOptions，可选）- QR 码元素的形状。可以是“方形”、“圆形”、“圆形”、“菱形”、“三角形”或“星形”。默认为“四舍五入”。
- eyePatternShape （BaseShapeOptions，可选）- 眼睛图案的形状。可以是“方形”、“圆形”、“圆形”、“菱形”、“三角形”或“星形”。默认为“四舍五入”。
- gap （数字，可选）- QR 码元素之间的间隙。默认值为 0。
- eyePatternGap （数字，可选）- 眼图图案中的间隙。默认值为 0。
logoAreaSize （数字，可选）- QRCode 内徽标区域的大小。
logo (React.ReactNode, 可选) - 要在 QRCode 中呈现的徽标组件。