أفضل الممارسات لإنشاء تطبيقات React Native - الجزء الأول

الصورة 1: صورة مجردة مع شعار React

إذا كنت جديدًا في عالم React Native ، فهناك بعض العثرات التي ربما ترغب في تجنبها بينما في بعض الحالات الأخرى ، سيتعين عليك اتخاذ الخيارات مقدمًا ربما دون معرفة مدى أهميتها.

أدناه قمت بتجميع قائمة بأفضل الممارسات من تجربتي الشخصية ، والتي آمل أن تجدها مفيدة :-)

استخدم Expo-Kit فقط إذا كنت تعرف بالضبط ما تفعله

Expo عبارة عن سلسلة أدوات مجانية ومفتوحة المصدر لـ React Native. ربما تكون أفضل مجموعة متوفرة لتطبيقات React Native ، ولكنها تأتي مع قيود.

استخدام المعرض:

  • إذا كنت تريد ملعبًا سريعًا وليس لبناء مستودع تطبيقك. ما عليك سوى إنشاء تطبيق جديد باستخدام حزمة المساعدة في إنشاء - رد - أصلي.
  • إذا كنت قد أجرت أبحاثًا مطولة عن التطبيق ، فستبني جميع احتياجاته ويمكن تغطيتها من الحلول المقدمة من Expo.
  • إذا لم يكن لديك جهاز كمبيوتر يعمل بنظام Mac وترغب تمامًا في إنشاء تطبيقك لجهاز iPhone أيضًا. إنه البديل الوحيد لبناء وكالات ترويجية قابلة للتنفيذ.

لا تستخدم Expo:

  • إذا كنت جديدًا في React Native وتعتقد أن هذه هي الطريقة "الضرورية" التي يجب اتباعها. تحقق مما إذا كانت تلبي احتياجاتك أولاً.
  • إذا كنت تخطط لاستخدام حزم RN الخارجية التي تحتوي على وحدات نمطية مخصصة. لا يدعم Expo هذه الوظيفة ، وفي هذه الحالة ، سيتعين عليك إخراج Expo-Kit. في رأيي ، إذا كنت ستخرج أي مجموعة ، فلا تستخدمها في المقام الأول. قد يجعل الأمور أكثر صعوبة مما لو لم تكن قد استخدمت هذه المجموعة على الإطلاق.

بشكل عام ، أعتقد أن Expo أداة رائعة ، وأنا استخدم Expo Snack لمشاركة مقتطفات من رموز RN. ولكن في الوقت الحالي ، يمكن أن يكون ذلك مفيدًا فقط لبناء أنواع معينة من التطبيقات.

كيفية تنظيم مجلدات التطبيق / الملفات

هيكلة تطبيق React Native الخاص بك لا يختلف عن هيكلة تطبيق React الخاص بك. لذلك إذا كنت معتادًا على ذلك ، يمكنك الالتزام بالمنطق الحالي. ولكن إذا لم تكن كذلك ، فربما تجد من المفيد المنطق المقترح أدناه:

الصورة 2: هيكل ملف / مجلد لتطبيق React Native
  • إضافة مجلد في الجذر يسمى "التطبيق"
  • إنشاء مجلدات داخل التطبيق:

الأصول - يمكنني استخدام ما يصل إلى 3 مجلدات هنا: الخطوط والرموز والصور

المكونات - هذا هو المكان الذي ستضع فيه جميع مكونات React المشتركة. عادة ما تكون هذه المكونات هي العناصر التي نسميها "وهمية" ، والتي ليس لها منطق دولة ويمكن إعادة استخدامها بسهولة عبر التطبيق.

المشاهدات - هذه شاشات التطبيق لدينا ، تلك التي نتصفحها من واحدة إلى أخرى. هذه أيضًا مكونات React ، لكنها العناصر التي نسميها الحاويات ، لأنها تحتوي على حالتها الخاصة.

الوحدات النمطية - هناك أجزاء لا تحتوي على جزء عرض مناظر (JSX). الأمثلة النموذجية لذلك هي وحدة الألوان (تحتوي على جميع ألوان التطبيق) ووحدة الأدوات المساعدة (تحتوي على وظائف الأداة المساعدة التي يتم إعادة استخدامها).

خدمات - هذه هي الوظائف التي التفاف مكالمات API.

i18n - هذه هي سلاسل الترجمة لمستخدمي اللغات واللغات المختلفة

تتطلب جميع التطبيقات نوعًا من التكوين ، لذلك أقوم عادةً بإنشاء ملف يسمى config.js ووضعه هناك. إذا وصل ملف التكوين إلى الكثير من الخطوط ، فيمكننا حينئذٍ إنشاء مجلد تكوين وفصل التكوين في الملفات.

إذا كان لديك مكتبة لمدير الولاية ، فستحتاج أيضًا إلى مجلدات لبنياتها. في حالة Redux ، يتم استخدام مجلدين إضافيين ، أحدهما للأعمال والآخر للمخفضات. إذا كنت لا تستخدم حزمة خارجية وتفضل استخدام واجهة React's Context API ، فستقوم بإنشاء موفرين خاصين بك ، يمكن وضعهم إما في مجلد الوحدات النمطية أو في مجلد جديد يسمى الموفرين.

اختيار مكتبة الملاحة وفقا لاحتياجاتك من البداية

لسوء الحظ ، لم تقدم RN حلاً ثابتًا حتى الآن أو حتى بديلاً عن مكون Navigator القديم ، وبالتالي فإننا نركز الآن على حلول المجتمع. لذا ، إذا كنت على وشك بدء مشروع ، فأنت تريد معرفة مكتبة التنقل التي ستستخدمها وما إذا كانت المكتبة المناسبة لك.

عموما هناك نوعان من مكتبات الملاحة. جافا سكريبت الملاحين والملوك الأصليين. تتم كتابة جافا سكريبت JavaScript في JavaScript بينما تتم كتابة الوحدات الأصلية كوحدات أصلية في النظام الأساسي المعني (Android ، iOS) ويتم دمجها في وحدات JavaScript حتى يتم التذرع بها في التعليمات البرمجية. السابق هو أسهل بكثير في الإعداد في حين أن الأخير هو أكثر أداء بكثير. اقض الوقت الكافي لمعرفة أي منها تحتاج إليه ثم اختر واحدة من بين العديد منها.

قام Spencer Carli بعمل رائع في شرح خيارات التنقل الحالية في React Native world في هذه المقالة التي أقترح عليك قراءتها. الخيارات المهيمنة هي React Navigation كحل JavaScript و React Native Navigation كحل أصلي.

استخدم مكتبة مجمّع CSS-in-JS للراحة

في React Native ، يتم كتابة CSS بلغة JavaScript. إنه شيء ليس لدينا خيار. شخصياً بدلاً من استخدام أسلوب StyleSheet.create ورمز CSS كجافا سكريبت خالص ، أفضل استخدام مكتبة Styled Components. تجعل مكونات Styled الكتابة من CSS شعورًا بديهيًا مرة أخرى وتجعل JSX تبدو أكثر دلالة.

لقد كتبت مؤخرًا مقالًا عن السبب في أنني أفضل استخدام Styled Components في تطبيقات React Native ، بحيث يمكنك إلقاء نظرة هناك لمزيد من التفاصيل.

قرر مبكرًا كيف تريد أن "يوسع تطبيقك" عبر أجهزة مختلفة وأحجام الشاشة

من المحتمل أن تقوم بتطوير تطبيق لأكثر من حجم جهاز واحد وحجم الشاشة. الآن هنا يوجد خياران حول كيفية التعامل مع التصميم / التطوير.

يمكنك اختيار أن يكون لديك UI / UX مختلفة حسب حجم الشاشة. ربما يكون هذا هو الخيار الأفضل لمعظم أنواع التطبيقات ولكنه يتطلب الكثير من الجهد نظرًا لوجود شاشات متعددة يتم تصميمها وتنفيذها. يمكن تحديد حجم الشاشات من خلال واجهة Dimensions API. بدلاً من ذلك ، يمكنك استخدام حزمة جهة خارجية توفر بعض الأدوات المساعدة خارج المربع مثل React Native Responsive UI.

أو يمكنك اختيار أن يكون لديك نفس واجهة المستخدم / UX التي سيتم تحجيمها بالتناسب مع جميع أحجام الشاشة. هذا هو الخيار الأفضل عندما تقوم على سبيل المثال بتطوير لعبة. مرة أخرى ، يمكنك استخدام حزمة خارجية لتحقيق ذلك مثل React Native Responsive Screen.

إخلاء المسؤولية: أنا صانع حزمة React Native Response Screen.

نهج الرسوم المتحركة بحذر

تعد الرسوم المتحركة مهمة جدًا لتطبيقات الأجهزة المحمولة ، لكن أداء React Native ليس في أفضل حالاته بعد.

من أجل حماية أنفسكم من تقديم نتائج سيئة ، تحتاج دائمًا إلى اختبار الرسوم المتحركة في الجهاز - لا يوفر المحاكي ردود فعل مناسبة. يجب أيضًا الاستفادة من prop useNativeDriver (مع ضبط القيمة على true) أينما يمكنك ، لأنها ستساعدك على تحقيق أداء أفضل.

لمزيد من النصائح حول كيفية تحقيق أداء أفضل ، يمكنك إلقاء نظرة على هذه المقالة السابقة.

ضع في اعتبارك أيضًا ...

  1. React Native لا يحتوي على عناصر DOM. بدلا من ذلك ، نحن نتعامل مع العناصر الأصلية.
  2. حول CSS:
  • ليست كل الخصائص مدعومة ؛ على الأقل ليس بعد. التحقق من الوثائق لمزيد من المعلومات: عرض الدعائم نمط ، الدعائم نمط الصورة ، الدعائم نمط النص
  • لا تعمل الخصائص المختصرة بشكل جيد ، لذلك تفضل دائمًا الخصائص المحددة (مثل الهامش السفلي ، أعلى الهامش ، الهامش الأيسر ، الهامش الأيمن بدلاً من الهامش)
  • لا تدعم كل الخصائص قيم النسبة المئوية. على سبيل المثال لا الحصر: الهامش وعرض الحدود ونصف قطرها الحدود. وإذا حاول شخص ما تعيين قيمة النسبة المئوية ، فسوف يتجاهلها RN تمامًا أو سيتعطل التطبيق.
  • يوفر RN دعما فليكسا خارج الصندوق. تعلمها واستخدامها كلما استطعت. أنت أفضل حليف لـ CSS!

ما رأيك؟

ما رأيك بهذه المقالة؟ ما هي أفضل الممارسات الأخرى التي لديك في الاعتبار؟ قدم وجهة نظرك وأفكارك في قسم التعليقات أدناه.

إذا استمتعت بهذا المقال ، فلا تتردد في الضغط على زر التصفيق هذا others لمساعدة الآخرين في العثور عليه.

عني

مرحبًا ، أنا تاسوس ؛ مهندس برمجيات يحب الويب ويعمل حاليًا كثيرًا مع React Native و React. أنا المؤسس المشارك لوكالة برمجيات Coded Lines حيث ننفذ مشاريع متنقلة وشاملة عبر الإنترنت مع التركيز على التسويق داخل التطبيق. إذا كان هذا يبدو ما تبحث عنه ، يرجى الاتصال بي هنا: tasos.maroudas@codedlines.com. شكرا لزيارتكم :)

___________________________________________________________________

شكر

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