react native qrcode skia

ตอบสนอง QRCode Skia ดั้งเดิมหรือไม่

ส่วนประกอบตัวสร้างโค้ด QR น้ำหนักเบาและประสิทธิภาพสูงสำหรับ React Native ขับเคลื่อนโดยกลไกการเรนเดอร์ Skia

สร้าง รหัส QR ของคุณในเวลาน้อยกว่า 30 วินาทีโดยใช้ qrcode.reactiive.io

สาธิต-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 โดยพื้นฐานแล้ว ซึ่งหมายความว่าการปรับแต่งนั้นตรงไปตรงมาโดยใช้อุปกรณ์ประกอบฉาก 'เด็ก' นี่คือตัวอย่าง:

 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 (สตริง) - ค่าที่เข้ารหัสใน QRCode

• style (StyleProp ไม่บังคับ) - สไตล์ที่ใช้กับคอนเทนเนอร์ QRCode

• errorCorrectionLevel (ErrorCorrectionLevelType ไม่จำเป็น) - ระดับการแก้ไขข้อผิดพลาดสำหรับ QRCode ระดับ L: 7%, ระดับ M: 15%, ระดับ Q: 25%, ระดับ H: 30% ค่าเริ่มต้นคือ 'H'

• color (string, ตัวเลือก) - สีของพาธฐาน QRCode ค่าเริ่มต้นคือ '#000000'

• strokeWidth (ตัวเลข ไม่บังคับ) - เปอร์เซ็นต์ของ strokeWidth (0 ถึง 1) ค่าเริ่มต้นคือ 1

• children (React.ReactNode ตัวเลือกเสริม) - ส่วนประกอบลูก ๆ ที่แสดงผลภายในคอนเทนเนอร์ QRCode

• pathStyle ('fill' | ' stroke', ตัวเลือก) - รูปแบบของเส้นทาง QRCode: 'fill' หรือ ' stroke' ค่าเริ่มต้นคือ 'จังหวะ'

• padding (ตัวเลข ไม่บังคับ) - ช่องว่างภายในที่ใช้กับ QRCode ค่าเริ่มต้นคือ 0

• size (ตัวเลข) - ขนาดของ QRCode

• 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 Animation ของฉันได้ที่นี่ และเรียนรู้วิธีพัฒนาทักษะด้านแอนิเมชั่นของคุณ
• Patreon: ทุกสัปดาห์ ตั้งแต่สองสามปีที่ผ่านมา ฉันจะแชร์แอนิเมชันพิเศษใหม่กับผู้สนับสนุนของฉัน หากคุณต้องการเข้าถึงทั้งหมด คุณสามารถเป็นผู้อุปถัมภ์ได้

มีส่วนร่วม

ดูคู่มือการมีส่วนร่วมเพื่อเรียนรู้วิธีมีส่วนร่วมในพื้นที่เก็บข้อมูลและเวิร์กโฟลว์การพัฒนา

ใบอนุญาต

เอ็มไอที

---

สร้างด้วย create-react-native-library