react native qrcode skiaダウンロード - react native qrcode skiaソースコードのダウンロード

react native qrcode skia

その他のソースコード

Release 0.3.0

ダウンロード

React Native QRCode Skia ?

Skia レンダリングエンジンを搭載した、React Native 用の軽量で高性能な QR コードジェネレーターコンポーネント。

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 Path です。これは、「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' | 'ストローク'、オプション) - QRCode パスのスタイル: 'fill' または 'ストローク'。デフォルト値は「ストローク」です。
padding (数値、オプション) - QRCode の周囲に適用されるパディング。デフォルト値は 0 です。
size (数値) - QRコードのサイズ。
shapeOptions (ShapeOptions、オプション) - QRCode パスの形状オプション。デフォルト値は {} です。 ShapeOptions には次のものが含まれます。
- shape (BaseShapeOptions、オプション) - QR コード要素の形状。「正方形」、「円」、「丸」、「ひし形」、「三角形」、または「星」を使用できます。デフォルトは「四捨五入」です。
- eyePatternShape (BaseShapeOptions、オプション) - 目のパターンの形状。「正方形」、「円」、「丸」、「ひし形」、「三角形」、または「星」を使用できます。デフォルトは「四捨五入」です。
- gap (数値、オプション) - QR コード要素間のギャップ。デフォルトは 0 です。
- eyePatternGap (数値、オプション) - アイパターンのギャップ。デフォルトは 0 です。
logoAreaSize (数値、オプション) - QRCode 内のロゴ領域のサイズ。
logo (React.ReactNode、オプション) - QRCode 内でレンダリングされるロゴコンポーネント。

私をサポートしませんか？

私の作品が気に入ってサポートしたい場合、最も簡単な方法は私の YouTube チャンネルに登録することです。これは簡単な仕事のように思えますが、私にとっては非常に意味のあることです。

私をサポートして限定コンテンツを入手するその他の方法:

私のコース (Reanimate.dev): 本当にアニメーションに興味がありますか?素晴らしい！これで私たちは二人になります。ここでは、私の React Native アニメーションコースにアクセスして、アニメーションスキルを向上させる方法を学ぶことができます。
パトリオン: 数年前から毎週、新しい特別アニメーションをパトロンと共有してきました。すべてにアクセスしたい場合は、パトロンになることができます。