مساء الخير ، سكان خاباروفسك. نتبادل معك اليوم ترجمة لمقال تم إعداد ترجمته خصيصًا لأول مرة من
دورة ReactJS / React Native-Developer . هل لديك قراءة جيدة.
إذا كنت جديدًا في عالم React Native ، فأنت تعلم أن لديه بعض العيوب التي ترغب في تجنبها. في بعض الحالات ، سيتعين عليك الاختيار مسبقًا دون أن يكون لديك أدنى فكرة عن كيفية تأثير ذلك أو ماذا.
أدناه قمت بتجميع قائمة بأفضل النصائح العملية من تجربتي الشخصية التي آمل أن تكون مفيدة لك :)
استخدم Expo-Kit فقط إذا كنت تعرف حقًا ما تفعله.
المعرض هو أداة مجانية مفتوحة المصدر ل React Native. من الممكن أن تكون هذه هي أفضل مجموعة من الأدوات لإنشاء تطبيقات على React Native ، ومع ذلك ، فإن لها حدودها أيضًا.
استخدام المعرض:- إذا كنت ترغب فقط في إنشاء صندوق رمل ، فلا تنشئ مستودعًا للتطبيق الخاص بك. ما عليك سوى إنشاء تطبيق جديد باستخدام حزمة create-react-native-app .
- إذا قمت بإجراء بحث قبل إنشاء تطبيق وأدركت أن جميع احتياجاته يمكن تغطيتها بواسطة الحلول التي يقدمها Expo.
- إذا لم يكن لديك جهاز كمبيوتر يعمل بنظام Mac OS ، لكنك لا تزال ترغب في إنشاء تطبيقات iPhone. هذا هو البديل الوحيد لإنشاء الملفات التنفيذية IPA.
لا تستخدم المعرض:- إذا كنت جديدًا على React Native وتعتقد أن هذه هي الطريقة الوحيدة لإنشاء تطبيق ما. بادئ ذي بدء ، تحقق مما إذا كانت تلبي متطلباتك.
- إذا كنت تخطط لاستخدام حزم RN لجهة خارجية مع وحدات المستخدم الأصلية. لا يدعم Expo هذه الوظيفة ، وفي هذه الحالة ستحتاج إلى استخراج (إخراج) Expo-Kit . في رأيي ، إذا كنت بصدد استخراج أي مجموعة من الأدوات في البداية ، يجب ألا تستخدمها على الإطلاق. سيؤدي إجراء الاستخراج إلى تعقيد إنشاء التطبيق ، مقارنةً إذا لم تستخدمه على الإطلاق.
بشكل عام ، أعتقد أن Expo أداة رائعة ، وأنا استخدم
Expo Snack بنفسي لمشاركة React Native code. ومع ذلك ، في الوقت الحالي ، يمكن أن يكون مفيدًا فقط لإنشاء أنواع معينة من التطبيقات.
كيفية بناء المجلدات والملفات من التطبيق الخاص بك
لا يختلف تنظيم تطبيق على React Native عن تنظيم تطبيق على React. لذلك ، إذا كنت معتادًا على ذلك ، فما عليك سوى الالتزام بنفس المنطق. ومع ذلك ، إذا لم يكن الأمر كذلك ، فسيكون المنطق الموضح أدناه مفيدًا:
- أضف المجلد إلى الجذر واسمه "التطبيق" ؛
- إنشاء مجلدات داخل "التطبيق":
assets - بداخلها لدي ما يصل إلى ثلاثة مجلدات مع الخطوط والرموز والصور.
components - هنا سوف تضع جميع مكونات React المشتركة. عادة ما تكون هذه هي المكونات التي نسميها "وهمية" لأنها لا تحتوي على منطق الدولة ويمكن إعادة استخدامها بسهولة داخل التطبيق.
views - هذه هي شاشات التطبيق لدينا ، تلك التي ننتقل بها من واحد إلى آخر. يتم أيضًا تخزين مكونات التفاعل هنا ، تلك التي نسميها الحاويات ، لأنها تخزن حالتها الخاصة.
modules - يتم تخزين الأجزاء التي لا تحتوي على عرض مناظر (JCX) هناك. الأمثلة النموذجية هي وحدة الألوان (تحتوي على جميع ألوان التطبيق) ووحدة الأدوات المساعدة (تحتوي على وظائف الأداة المساعدة التي يمكن إعادة استخدامها).
services - فيما يلي الوظائف التي تقوم بلف مكالمات API.
i18n - يتم تخزين الترجمة هنا للمستخدمين الذين يستخدمون لغات ولغات مختلفة.
تتطلب جميع التطبيقات نوعًا معينًا من التكوين ، لذلك عادةً ما أقوم بإنشاء ملف يسمى
config.js وقم بتخزينه هناك. إذا كان هناك العديد من الأسطر في ملف التكوين ، يمكنك إنشاء مجلد
config منفصل وتقسيمه إلى عدة ملفات.
إذا كان لديك مكتبة لإدارة الولاية ، فستحتاج أيضًا إلى مجلدات لمكوناتها. في حالة Redux ، يتم استخدام مجلدين أو أكثر ، أحدهما
actions والآخر
reducers . إذا كنت لا تستخدم حزم خارجية وتفضل استخدام واجهة برمجة تطبيقات React Context ، فيمكنك إنشاء موفري الخدمات الخاصة بك ، والتي يمكن وضعها في مجلد الوحدات النمطية أو في مجلد
providers الجدد.
نختار مكتبة الملاحة وفقا لاحتياجاتك
لسوء الحظ ، ليس لدى RN حلاً كاملاً أو بديلًا جيدًا على الأقل لمكون Navigator القديم ، لذلك سنركز الآن على كيفية قيام المجتمع بحل هذه المشكلة. لذلك ، إذا كنت ستقوم بإنشاء مشروع وتريد معرفة مكتبة التنقل التي ستستخدمها ، فهذا القسم مخصص لك فقط.
بشكل عام ، هناك نوعان من مكتبات التنقل: متصفح JavaScript و Navigators. تتم كتابة الأولى في جافا سكريبت ، في حين أن المكتبات الأصلية مكتوبة في وحدات أصلية وفقًا للنظام الأساسي (Android ، iOS) ومتصلة بوحدات JavaScript التي سيتم طرحها في الكود. السابق أسهل بكثير في الإعداد ، في حين أن الأخير أكثر كفاءة بكثير. خذ الوقت الكافي لمعرفة أي نوع يناسبك ، ثم اختر من بين العديد من المكتبات من هذا النوع.
قام Spencer Carly بعمل رائع وقام بتطوير خيارات التنقل الحالية في React Native world ، يمكنك قراءة
مقالته حول هذا الموضوع. الحلول الأكثر شعبية الآن هي
React Navigation ، كحل JavaScript ، و
React Native Navigation ، كحل أصلي.
للراحة ، استخدم مكتبة مجمّع CSS-in-JS
في React Native ، يتم كتابة CSS بلغة JavaScript. هنا ليس لدينا خيار. شخصياً ، بدلاً من استخدام أسلوب
StyleSheet.create ورمز CSS في جافا سكريبت خالص ، استخدم مكتبة
Styled Components . تجعل المكونات المصممة CSS واضحة مرة أخرى وتجعل JSX أكثر دلالة.
لقد كتبت مؤخرًا مقالًا عن السبب في أنني أفضل استخدام مكونات
Styled في تطبيقات
React Native ، يمكنك قراءتها لفهم الموضوع بشكل أفضل.
حدد مسبقًا كيف تريد تطبيقك أن يتوسع على أجهزة مختلفة بأحجام مختلفة للشاشة.
على الأرجح ، تقوم بتطوير تطبيق لأكثر من جهاز وحجم الشاشة. الآن هناك طريقتان لتصميم وتطوير التطبيقات.
يمكنك اختيار UX / UI مختلفة حسب حجم الشاشة. بالنسبة لمعظم أنواع التطبيقات ، ربما يكون هذا هو الخيار الأفضل ، لكنه يتطلب الكثير من الجهد ، لأنك تحتاج إلى الخروج وتنفيذ العديد من خيارات الشاشة. يمكن تحديد أحجام الشاشة باستخدام
Dimensions API . من ناحية أخرى ، يمكنك استخدام حزمة الجهة الخارجية التي توفر من خارج الصندوق بعض الأدوات ، مثل
React Native Responsive UI .
أو يمكنك استخدام نفس واجهة المستخدم / UX ، والتي سيتم قياسها بشكل متناسب لجميع أحجام الشاشة. هذا هو أفضل خيار ، على سبيل المثال ، إذا كنت تقوم بتطوير لعبة. مرة أخرى ، يمكنك استخدام حزمة تابعة لجهة خارجية ، على سبيل المثال ،
React Native Responsive Screen .
إخلاء المسئولية: أنا منشئ حزمة React Native Response Screen .
كن حذرا مع الرسوم المتحركة
الرسوم المتحركة ضرورية لتطبيقات الأجهزة المحمولة ، لكن أداء React Native ضعيف.
للحماية من الأخطاء ، تحتاج إلى اختبار الرسوم المتحركة على الجهاز ، لأن المحاكي لا يوفر التغذية المرتدة الصحيحة. يجب أيضًا استخدام
useNativeDriver (مع true) كلما كان ذلك ممكنًا ، حيث سيساعد ذلك في تحقيق أداء أفضل.
إذا كنت تريد المزيد من النصائح حول كيفية تحقيق أداء أفضل ، ألق نظرة على مقالتي السابقة.
تذكر أيضا
- React Native لا يوجد لديه عناصر DOM. بدلا من ذلك ، نحن نعمل مع العناصر الأصلية.
- حول CSS:
- لا يتم دعم جميع الميزات ، على الأقل حتى الآن. لمعرفة المزيد ، راجع الوثائق: عرض خصائص النمط ، خصائص نمط الصورة ، خصائص نمط النص .
- لا تعمل الخصائص المختصرة دائمًا بشكل جيد ، لذلك من الأفضل استخدام خصائص محددة (مثل الهامش السفلي ، أعلى الهامش ، الهامش الأيسر ، الهامش الأيمن بدلاً من الهامش).
- ليست كل الخصائص تدعم النسب المئوية. على سبيل المثال ، ما يلي: الهامش وعرض الحدود ونصف قطرها الحدود. إذا حاول شخص ما استخدام قيم النسبة المئوية ، فسوف يتجاهلها RN ، أو سيتعطل التطبيق من حيث المبدأ.
- RN يدعم المرن خارج الصندوق. فحصه واستخدامه عند الاقتضاء. هذا هو أفضل حليف CSS!
هذا كل شيء. تعلم المزيد عن الدورة
هنا .