react native qrcode skia

رد فعل QRCode الأصلي Skia؟

مكون منشئ رموز QR خفيف الوزن وعالي الأداء لـ React Native، مدعوم بمحرك عرض Skia.

أنشئ رمز الاستجابة السريعة الخاص بك في أقل من 30 ثانية باستخدام qrcode.reactive.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 ;

تحت الغطاء، رمز الاستجابة السريعة هو في الأساس مسار تزلج. وهذا يعني أن التخصيص سهل ومباشر باستخدام دعامة "الأطفال". هنا مثال:

 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 (سلسلة، اختياري) - لون المسار الأساسي لـ QRCode. القيمة الافتراضية هي "#000000".

• strokeWidth (رقم، اختياري) - النسبة المئوية لعرض الحد (من 0 إلى 1). القيمة الافتراضية هي 1.

• children (React.ReactNode، اختياري) - المكونات الفرعية المعروضة داخل حاوية QRCode.

• pathStyle ("ملء" | "حد"، اختياري) - نمط مسار QRCode: "ملء" أو "حد". القيمة الافتراضية هي "السكتة الدماغية".

• padding (رقم، اختياري) - الحشو المطبق حول QRCode. القيمة الافتراضية هي 0.

• size (الرقم) - حجم رمز QRCode.

• shapeOptions (ShapeOptions، اختياري) - خيارات الشكل لمسار QRCode. القيمة الافتراضية هي {}. تتضمن خيارات الشكل ما يلي:

  • shape (BaseShapeOptions، اختياري) - شكل عناصر رمز الاستجابة السريعة. يمكن أن تكون "مربع" أو "دائرة" أو "مستدير" أو "ماسي" أو "مثلث" أو "نجمة". الافتراضي هو "مستدير".
  • eyePatternShape (BaseShapeOptions، اختياري) - شكل أنماط العين. يمكن أن تكون "مربع" أو "دائرة" أو "مستدير" أو "ماسي" أو "مثلث" أو "نجمة". الافتراضي هو "مستدير".
  • gap (رقم، اختياري) - الفجوة بين عناصر رمز الاستجابة السريعة. الافتراضي هو 0.
  • eyePatternGap (رقم، اختياري) - الفجوة في أنماط العين. الافتراضي هو 0.

• logoAreaSize (رقم، اختياري) - حجم منطقة الشعار داخل QRCode.

• logo (React.ReactNode، اختياري) - مكون الشعار الذي سيتم عرضه داخل QRCode.

هل ترغب في دعمي؟

إذا أعجبك عملي وتريد دعمي، فأسهل طريقة هي الاشتراك في قناتي على اليوتيوب. تبدو هذه مهمة سهلة، لكنها تعني الكثير بالنسبة لي.

طرق أخرى لدعمي والحصول على محتوى حصري:

• الدورة التدريبية الخاصة بي (Reanimate.dev): هل أنت مهتم حقًا بالرسوم المتحركة؟ رائع! وهذا يجعل اثنين منا. هنا يمكنك الوصول إلى دورة الرسوم المتحركة React Native الخاصة بي ومعرفة كيفية تحسين مهاراتك في الرسوم المتحركة.
• Patreon: كل أسبوع، منذ بضع سنوات، كنت أشارك رسومًا متحركة خاصة جديدة مع رعاتي. إذا كنت تريد الوصول إليها جميعًا، فيمكنك أن تصبح راعيًا.

المساهمة

راجع دليل المساهمة لمعرفة كيفية المساهمة في المستودع وسير عمل التطوير.

رخصة

معهد ماساتشوستس للتكنولوجيا

---

تم إنشاؤه باستخدام مكتبة رد الفعل الأصلية