react native qrcode skia - react native qrcode skia

react native qrcode skia

Kode sumber lainnya

Release 0.3.0

Unduh

Bereaksi QRCode Asli Skia?

Komponen pembuat kode QR yang ringan dan berkinerja tinggi untuk React Native, didukung oleh mesin rendering Skia.

Hasilkan Kode QR Anda dalam waktu kurang dari 30 detik menggunakan qrcode.reactive.io.

demo-qrcode-x.mp4

Instalasi

Sebelum menginstal paket, pastikan Anda telah menginstal RN Skia.

yarn add @shopify/react-native-skia

Kemudian, Anda dapat menginstal paketnya:

yarn add react-native-qrcode-skia

Penggunaan

Anda mungkin memerlukan komponen QRCode yang sangat sederhana di aplikasi Anda dan Anda dapat mencapainya dengan menggunakan props dasar (nilai dan ukuran). Berikut ini contohnya:

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

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

export default App ;

Di bawah tenda, QRCode pada dasarnya adalah Jalur Skia. Ini berarti bahwa penyesuaian dapat dilakukan dengan mudah menggunakan prop 'anak-anak'. Berikut ini contohnya:

 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 ;

Alat peraga

value (string) - Nilai yang dikodekan dalam QRCode.
style (StyleProp, opsional) - Gaya yang diterapkan ke wadah QRCode.
errorCorrectionLevel (ErrorCorrectionLevelType, opsional) - Tingkat koreksi kesalahan untuk QRCode. Tingkat L: 7%, tingkat M: 15%, tingkat Q: 25%, tingkat H: 30%. Nilai defaultnya adalah 'H'.
color (string, opsional) - Warna jalur dasar QRCode. Nilai defaultnya adalah '#000000'.
strokeWidth (angka, opsional) - Persentase strokeWidth (0 hingga 1). Nilai defaultnya adalah 1.
children (React.ReactNode, opsional) - Komponen anak-anak yang dirender dalam wadah QRCode.
pathStyle ('fill' | 'stroke', opsional) - Gaya jalur QRCode: 'fill' atau 'stroke'. Nilai defaultnya adalah 'goresan'.
padding (angka, opsional) - Padding diterapkan di sekitar QRCode. Nilai defaultnya adalah 0.
size (angka) - Ukuran QRCode.
shapeOptions (ShapeOptions, opsional) - Opsi bentuk untuk jalur QRCode. Nilai defaultnya adalah {}. Opsi Bentuk meliputi:
- shape (BaseShapeOptions, opsional) - Bentuk elemen kode QR. Bisa berbentuk 'persegi', 'lingkaran', 'bulat', 'berlian', 'segitiga', atau 'bintang'. Standarnya adalah 'bulat'.
- eyePatternShape (BaseShapeOptions, opsional) - Bentuk pola mata. Bisa berbentuk 'persegi', 'lingkaran', 'bulat', 'berlian', 'segitiga', atau 'bintang'. Standarnya adalah 'bulat'.
- gap (angka, opsional) - Kesenjangan antara elemen kode QR. Standarnya adalah 0.
- eyePatternGap (angka, opsional) - Celah pada pola mata. Standarnya adalah 0.
logoAreaSize (angka, opsional) - Ukuran area logo dalam QRCode.
logo (React.ReactNode, opsional) - Komponen logo yang akan dirender dalam QRCode.

Apakah Anda ingin mendukung saya?

Jika Anda menyukai karya saya dan ingin mendukung saya, cara termudah adalah dengan berlangganan saluran YouTube saya. Ini sepertinya tugas yang mudah, namun sangat berarti bagi saya.

Cara lain untuk mendukung saya dan mendapatkan konten eksklusif:

Kursus saya (Reanimate.dev): Apakah Anda benar-benar menyukai animasi? Fantastis! Ini membuat kita berdua. Di sini Anda dapat mengakses kursus animasi React Native saya dan mempelajari cara meningkatkan keterampilan animasi Anda.
Patreon: Setiap minggu, sejak beberapa tahun, saya membagikan animasi spesial baru kepada Patron saya. Jika Anda ingin mengakses semuanya, Anda bisa menjadi Patron.