كيفية بناء الموقت الوجه في React Native

الصورة من فيكو لونا على Unsplash

المقدمة

جهاز Flip Timer عبارة عن جهاز رقمي لحفظ الوقت مع الإشارة إلى الأرقام التي يتم كشفها بالتسلسل بواسطة شاشة عرض مقسمة.

ستوضح هذه المقالة إنشاء Flip Fliper في React Native باستخدام واجهات برمجة التطبيقات المكشوفة وليس هناك تبعيات إضافية.

تحديات للتغلب عليها

  • قم بتنفيذ خاصية أصل التحويل باستخدام تقنيات مصفوفات Course Math College الخاصة بك لأنها غير مدعومة في React Native. يكون الدوران حول الأصل المركزي (افتراضيًا) أمرًا سهلاً ، لكننا نحتاج إلى ترجمة الأصل والتدوير حول الحواف.
  • تنفيذ مكون رقم الوجه.
  • التغلب على تجاوز سعة: مشكلة خفية في نظام Android نظرًا لأنه لا يعمل مع عناصر ذات وضع مطلق.

محتويات

  1. تطبيق مكون رقم الوجه
  2. تطبيق FoldView
  • تخطيط الأساسية
  • التغلب على التحدي
  • مضيفا التحولات
  • إضافة الرسوم المتحركة

3. تحديث مكون الموقت

4. النتيجة النهائية

5. الروابط

تطبيق مكون رقم الوجه

تخطيط الأساسية

يتكون Basic Layout من بطاقتين - العلوي والسفلي مرتبطان معًا بحيث تبدو طريقة العرض "انعكاس مؤقت".

رقم البطاقة

إنه تصميم أساسي يتكون من غلاف وبطاقتين - السفلي والعلوي.

ملاحظة: تمت إضافة الرقم السابق إليها إلى Lower Card. سيتم الكشف عن استخدامه بمجرد أن نصل إلى تطبيق FoldView.

صورة الائتمان: الكربون. | الرمز: جيثب

بطاقة

تم تجاوز سعة غلاف البطاقة: مخفي ، ونحن نقوم بترجمة عناصرها (العدد) استنادًا إلى نوع البطاقة (العلوي أو السفلي).

صورة الائتمان: الكربون. | الرمز: جيثب

تطبيق FoldView

تخطيط الأساسية

لبناء FoldView ، نحتاج إلى FlipCards شبيهان بـ NumberCards ولكن مع تحديد موضع مطلق بحيث يكونا أعلى من NumberCards عند تطبيق الرسوم المتحركة على الوجه.

رقم البطاقة

إضافة مكون FlipCard إلى مكون NumberCard.

صورة الائتمان: الكربون. | الرمز: جيثب

بطاقة الوجه

مكون FlipCard عبارة عن غلاف متحرك مع تحديد موضع مطلق يستخدم أثناء تطبيق الرسوم المتحركة.

التحدي (الجزء 2 والجزء 3): تجاوز السعة: مخبأة مع تحديد المواقع المطلقة لديه قضايا رئيسية في الروبوت. باستخدام منشور StackOverflow هذا ، يمكن حله باستخدام حاوية الفائض داخل العنصر المطلق الموضع.

صورة الائتمان: الكربون. | الرمز: جيثب

النتيجة النهائية

التغلب على التحدي

الآن يأتي الجزء الصعب. نحن بحاجة إلى إضافة أضعاف مكون FlipCard على الحواف.

نظرًا لأن React Native لا يدعم خاصية أصل التحويل ، فنحن بحاجة إلى إيجاد طريقة أخرى لتحويل أصل التدوير على الحافة السفلية.

لحسن الحظ ، هناك طريقة واحدة للتغلب على هذه المشكلة. وفقًا لهذه المقالة الرائعة وقراءة مستندات MDN لخاصية تحويل المنشأ ، يمكن تنفيذها باستخدام المصفوفات.

تيلس

يعرض React Native العديد من عمليات المصفوفة في MatrixMath.js. أهم تلك التي نطلبها هي

  • مصفوفة الهوية: تقوم بإرجاع مصفوفة هوية 4 * 4 [1 ، 0 ، 0 ، 0 ، 0 ، 1 ، 0 ، 0 ، 0 ، 0 ، 0 ، 1 ، 0 ، 0 ، 0 ، 1]
صورة الائتمان: الكربون. | الرمز: جيثب
  • مصفوفة الضرب: تولد طريقة الأداة المساعدة هذه الإخراج استنادًا إلى ضرب المصفوفات 4 * 4 a و b الموفرة كمدخلات.
صورة الائتمان: الكربون. | الرمز: جيثب
  • تدوير المصفوفة: إنها طريقة مساعدة مخصصة ستأخذ مصفوفة 4 * 4 ودرجة سيتم تدويرها ثم ضربها في المصفوفة الأصلية لإرجاع النتيجة التي تم إنشاؤها.
صورة الائتمان: الكربون. | الرمز: جيثب
  • مصفوفة المنظور: تتيح لنا هذه الأداة المساعدة استخدام نمط المنظور في React Native ثم مضاعفة المصفوفة الأصلية 4 * 4.
صورة الائتمان: الكربون. | الرمز: جيثب
  • ترجمة المصفوفة: هذه الطريقة المساعدة ستترجم الأصل وتعديل المصفوفة الأصلية 4 * 4
صورة الائتمان: الكربون. | الرمز: جيثب
  • Un-Translate Matrix: ستقوم طريقة المساعدة هذه بإلغاء ترجمة الأصل وتعديل المصفوفة الأصلية 4 * 4
صورة الائتمان: الكربون. | الرمز: جيثب

مضيفا التحولات

deg هي الدرجة التي سيتم تدويرها و y هي ارتفاع العنصر الذي سيتم ترجمته إليه.

التحدي (الجزء 1): تم الجمع بين الأدوات المساعدة من أعلاه ، ويتم تنفيذ أصل التحويل بنجاح.

صورة الائتمان: الكربون. | الرمز: جيثب

إضافة الرسوم المتحركة

صورة الائتمان: الكربون. | الرمز: جيثب

تحديث مكون الموقت

إضافة وقت استخدام

سيؤدي هذا الاستخدام إلى زيادة المؤقت بمقدار ثانية واحدة وضبط الساعات والدقائق والثواني.

صورة الائتمان: الكربون. | الرمز: جيثب

مكون الموقت

سيقوم مكون المؤقت بالاتصال بـ Time Util وتحديث المكون استنادًا إلى الساعات والدقائق والثواني

صورة الائتمان: الكربون. | الرمز: جيثب

مكون رقم الوجه

يقسم هذا المكون فقط الرقم إلى جزأين بناءً على موضع أرقامهم ويستدعي مكون NumberCard.

صورة الائتمان: الكربون. | الرمز: جيثب

النتيجة النهائية

الروابط

لقد نشرت حزمة خاصة بها تحتوي على المزيد من الخصائص القابلة للتخصيص.

  • npm: تفاعل مواليد الوجه
  • جيثب: رد فعل الموقت الأصلي

يمكن العثور على المزيد من الأشياء الرائعة في ملفاتي الشخصية StackOverflow و GitHub.

اتبعني على LinkedIn و Medium و Twitter لمزيد من التحديث للمقالات الجديدة.

التصفيق واحد ، واثنين من التصفيق ، وثلاث التصفيق ، والأربعين؟

نُشر في الأصل على blog.pritishvaidya.com في 2 مارس 2019.