أولاً ، اسمحوا لي أن أذكركم بأن React Native (RN) هي تقنية مشتركة بين الأنظمة الأساسية لبناء تطبيقات الأجهزة المحمولة. يعتقد الكثير من الناس أن ميزته الرئيسية هي استخدام قاعدة كود واحدة لتطبيقين ، لكنني لا أعتبر أن هذا هو الأكثر قيمة في RN. القيمة الأساسية هي استخدام React بكل مزاياها ، بما في ذلك مجتمع تطوير الويب الأوسع. من المنطقي تمامًا أن يبدأ مطورو React في إنشاء تطبيقات الهاتف باستخدام React Native بعد تجربة قوية مع React. لكن عالم الهاتف المحمول مختلف تمامًا عن الويب. أريد اليوم أن أشارك ما يجب أن تضعه في اعتبارك وأنت تغوص في عالم تطوير الأجهزة المحمولة.
1. ضغط الشاشة
تفترض CSS أنك تعمل بوحدة بكسل كوحدة فعلية بحجم 1/96 من البوصة. يكون هذا مفيدًا إذا كنت تقوم بإنشاء موقع ويب لأجهزة كمبيوتر سطح المكتب فقط ، ولكن عند العمل على موقع للأجهزة المحمولة ، عليك التفكير في كثافات الشاشة المختلفة. لهذا السبب تحتاج إلى هوامش مختلفة ، وتركيب للأجهزة المختلفة ، وأصول مختلفة (مثل الصور) لها. هناك مقال جيد يشرح نهج الهاتف المحمول. بدلاً من ذلك ، يمكنك الرجوع مباشرة إلى مورد Android Developer .
2. الملاحة
عادةً ما يحتوي متصفح الويب على الصفحة الحالية وزر الرجوع لتخزين المحفوظات ونقاط ارتساء أخرى. في النسخة المحمولة من الموقع ، لدينا شاشات ، والتنقل بينها ، يعمل في أنماط واضحة: التنقل عبر علامات التبويب ، على طول المكدس ، والتراجع. لا يمكنك استخدام جهاز التوجيه React لهذا الغرض ، ولكن يمكنك استخدام مكتبة التنقل React للتنقل سريع الاستجابة بدلاً من ذلك .
التنقل بعلامة التبويب المتحركة في React-Native
3. الأنماط
هنا في عالم الأجهزة المحمولة ، لن تعمل CSS ، ولا يعمل أي من الحلول التي تعمل معها. لا يمكنك استخدام CSS-in-JS أو LESS أو أي شيء آخر. بدلاً من ذلك ، يمكنك استخدام كائنات JSON لتحديد أنماط المكونات.
ملحوظة:
- استخدم دائمًا StyleSheet.create ({}) بحيث يمكن لـ React-Native تخزين الأنماط مؤقتًا ؛
- لا يزال Flexbox هنا ، فقط له اسم مختلف.
مثال على أنماط React-Native
4. الشبكة
إذا كنت تقوم بإنشاء موقع ويب أو تطبيق سطح مكتب باستخدام React (مثل Electron) ، فيمكنك الاعتماد على اتصال إنترنت جيد ومستقر بشكل معقول. لكننا الآن نتحدث عن الأجهزة المحمولة ، وهنا يمكن أن يكون الإنترنت بطيئًا للغاية أو غير مستقر أو حتى غائب. لذلك ، من الضروري تطوير تطبيق مع مراعاة هذه الخصوصية: طلبات الاتصال والعمل دون اتصال (التخزين المؤقت ، على سبيل المثال). يمكن أن ينقطع الاتصال أيضًا أثناء العملية ، لذلك يجب أن تكون مستعدًا لذلك.
5. التوقيع
على عكس موقع الويب ، الذي يمكن نشره ببساطة في وحدة تخزين متوافقة مع S3 ، يجب توقيع تطبيق الهاتف رقمياً للهاتف للتأكد من أن المطور موثوق به. يمكن أن تكون هذه العملية شاقة حقًا ، خاصة لنظام iOS ، حيث تحتاج إلى شراء برنامج لمطور ، وإنشاء معرف تطبيق ، وملف تعريف ، وإنشاء شهادة توقيع وتصديرها ... على نظام Android الأساسي ، يبدو الأمر أبسط: يمكنك إنشاء جميع البيانات الضرورية باستخدام سطر أوامر واحد أو باستخدام Android Studio وتوزيع التطبيق على الفور.
6. النشر
مرة أخرى: لا يمكنك فقط تحميل المحتوى إلى S3 أو جهاز افتراضي. تحتاج إلى المرور عبر Google Play و App Store أو توزيع تطبيقك خارج المتجر الرسمي ، على سبيل المثال ، إذا كان التطبيق خاصًا بالشركات ، وهو مخصص فقط لموظفي مؤسسة واحدة. ومع ذلك ، لن يسمح App Store ببساطة بنشر التطبيق مباشرة على App Store ، وسيكون عليك استخدام نوع من حلول MDM أو ببساطة توزيعه عبر MS App Center و Firebase Distribution وما إلى ذلك.
بالإضافة إلى ذلك ، هناك العديد من القواعد في المتاجر التي يجب اتباعها. وتشمل هذه الرموز والرسومات وإرشادات واجهة المستخدم والأذونات والأمان والمزيد.
7. الأدوات
يمكنك أيضًا استخدام VSCode أو WebStore أو حتى Vim لتحرير الكود الخاص بك و Chrome كمصحح أخطاء ، أو يمكنك استخدام Xcode و Android Studio للحصول على المزيد من المزايا مثل السجلات وأدوات المراقبة وتحرير الملفات والمزيد. ستحب أيضًا Flipper و Reactotron والأدوات الأخرى التي من شأنها تسريع عملك باستخدام React-Native.
React-Native في WebStorm IDE
8. المحاكيات والمحاكيات والأجهزة
لتطوير الويب ، المتصفحات المتعددة كافية. لتطوير الأجهزة المحمولة ، تحتاج إلى تشغيل الكود على جهاز محمول: يمكنك استخدام هاتفك ، ولكن من غير المحتمل أن يكون لديك أجهزة تعمل بنظامي Android و iOS في متناول يدك.
أخبار سارة: يمكنك استخدام محاكيات Android (التي يمكن تنزيلها وتشغيلها من Android Studio) أو محاكيات iOS التي تم إنشاؤها من Xcode إذا كنت تستخدم جهاز Mac (لا ، لا يمكنك استخدام محاكيات iOS على أي جهاز آخر ، على الأقل من الناحية القانونية ). إنها تجربة جديدة تمامًا ، ولكنها ممتعة.
9. العلاقة مع الكود الأصلي
سيبقى رمز js معك ، لكنه سيتفاعل أيضًا مع الكود الأصلي (Kotlin ، Swift). يجب أن يكون التطبيق مرتبطًا بشكل صحيح ، وإلا فقد يتعطل أو يتعطل. والخبر السار هو أنه عند العمل مع React-Native منذ الإصدار 0.60 ، يحدث الربط تلقائيًا لمعظم المكتبات الخارجية.
هندسة تطبيق React-Native
10. إعادة استخدام الكود
خبر سار ، أخيرًا! إذا كنت تقوم ببناء تطبيق ويب وتطبيق جوال ، فيمكنك إعادة استخدام بعض التعليمات البرمجية. يمكنك بالتأكيد إعادة استخدام المجال بالكامل ورمز الشبكة ، حيث لا توجد خصوصية للإنترنت أو الأجهزة المحمولة. من المرجح أن تكون قادرًا على إعادة استخدام منطق الأعمال أيضًا ، ولكن هذا أقل احتمالًا.
في المقالات المستقبلية ، آمل أن ألقي نظرة فاحصة على كل من هذه النقاط.