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 中呈現的徽標元件。