كيفية إضافة شاشة البداية إلى تطبيق React Native (iOS و Android)

تم التحديث: 27 فبراير 2018

غالبًا ما أُسأل عن ذلك الميل الأخير من تطوير تطبيق React Native (في الواقع أدخله في متجر التطبيقات). هناك ما هو أكثر من مجرد إنشاء تطبيقك وإرساله إلى Apple / Google - يجب عليك إضافة رموز وشاشات البداية وكتابة الأوصاف وأكثر من ذلك قبل إرساله للمراجعة.

اليوم سنغطي شاشات البداية على نظامي التشغيل iOS و Android.

باستخدام Expo أو إنشاء تطبيق React Native؟ لا حاجة للذهاب إلى كل هذا - يمكنك متابعة مستنداتهم وإعدادهم في أي وقت من الأوقات.

في هذا البرنامج التعليمي ، سنعمل في IDEs للنظام الأساسي ونكتب قليلاً من الكود الأصلي. لا تقلق ، سأنقلك في كل شيء. الرمز النهائي متاح على جيثب.

سأبدأ بإنشاء SplashExample الأصلي - رد فعل تطبيق React Native الجديد.

Protip: إعداد عنصر تحكم مصدر قبل المتابعة على طول! ليس فقط طريقة جيدة لتغيير التغييرات عند ارتكاب خطأ ، بل إنها أيضًا طريقة رائعة لمعرفة ما تم تغييره بالضبط لتمكين شاشة البداية.

أصول شاشة البداية

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

لذا ، بدلاً من ذلك ، سنبدأ مع صورة واحدة تشبه إلى حد كبير رمزنا. الفكرة هنا ذات شقين:

  1. اجعله يشبه الأيقونة التي ينمو المستخدم فيها لملء الشاشة بالكامل مما يؤدي إلى انتقال سلس.
  2. أبقيها بسيطة. يجب أن تظهر شاشة البداية لبضعة ميلي ثانية فقط. لا يجب أن يحتوي على الكثير من المعلومات - إنها شاشة تحميل مخيفة.

مع وضع كل ذلك في الاعتبار ، سنبدأ مع صورة مربعة بثلاثة أحجام (@ 1x = 200px ، @ 2x = 400px ، @ 3x = 600px).

يمكنك الحصول على تلك الصور من جيثب.

تحضير التطبيق

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

استبدال App.js بـ

كل هذا لم يتم تعيين لون الخلفية إلى # 4F6D7A ، ولون النص إلى # F5FCFF ، واستخدام نص فاتح في شريط الحالة.

التطبيق الأساسي

إضافة شاشات البداية (iOS)

أولاً افتح المشروع في Xcode.

افتح ios / SplashExample.xcodeproj

نريد بعد ذلك إضافة أصل صورة جديد داخل Xcode. يمكنك الوصول إلى ذلك في المستكشف الأيسر - SplashExample> SplashExample> Imagex.xcassets ثم الضغط على "+" في ثاني أكثر المستكشف الأيسر. يطلق عليه "SplashIcon"

إضافة أصول الصورة

ثم المضي قدما وإضافة الصور الثلاث التي قمت بتنزيلها في وقت سابق. سيتم ربطهم تلقائيًا بكثافة البكسل الصحيحة.

أصول الصورة

يمكنك حينئذٍ فتح LaunchScreen.xib ، وهو متاح مرة أخرى في أكثر الملاح الأيسر يجب أن ترى هذا.

LaunchScreen.xib

حدد عنصري النص ("SplashExample" و "Powered by React Native") وحذفهما.

بعد ذلك ، سنقوم بتعيين لون خلفية العرض. حدد "عرض" في الجزء الثاني الأيسر الأكثر الملاح. بعد ذلك ، في أكثر المستكشفين المناسبين ، اختر "الخلفية" التي ستظهر في مربع حوار منتقي.

منتقي لون الخلفية
Protip: استغرق الأمر مني البحث عن هذا ولكن إذا اخترت الخيار الثاني في لاقط اللون ثم اختر "RGB Sliders" ، يمكنك عندئذ إدخال قيمة ست عشرية.
تلميح منتقي الألوان

المضي قدما وتعيين لون الخلفية إلى # 4F6D7A.

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

عرض الصورة

تريد بعد ذلك تعيين مصدر الصورة من أعلى اليمين. عند تحديد القائمة المنسدلة للصورة ، يجب أن تظهر أي صور من Images.xcassets - اختر SplashIcon.

ضبط الصورة

الآن لتحديد أبعاد تعيين "وضع المحتوى" إلى "الجانب صالح". هذا متاح في القائمة اليمنى معظم ، أسفل الثاني.

صالح الجانب

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

مسطرة

داخل قسم "Autoresizing" ، ستحتاج إلى تعطيل الخطوط الحمراء الخارجية وتمكين الأسهم الحمراء الداخلية. سيسمح هذا للصورة بالبقاء في مركز بغض النظر عن أبعاد الشاشة.

Autoresizing

هذا يتركنا مع ما يلي:

النتيجة الأولية

الآن للتعامل مع فلاش الشاشة الأبيض المزعج ...

أولاً ، لماذا يحدث هذا؟ عندها يتم تحميل جافا سكريبت والجسر قيد التهيئة. على الأقل هذه هي الطريقة التي أفكر بها. تظهر شاشة البداية عندما يتم تشغيل التطبيق لأول مرة (React Native). ثم أثناء تهيئة React Native ، نحصل على تلك الشاشة البيضاء ، لذا ما نحتاج إلى فعله هو "تعليق" شاشة البداية أطول قليلاً من السلوك الافتراضي.

هذا هو المكان الذي سنستخدم فيه شاشة البداية التفاعلية.

قم أولاً بتثبيت الحزمة ثم ربطها.

غزل إضافة رد فعل- الأصلي- plash-screen@3.0.6
رد فعل الرابط الأصلي رد فعل الشاشة البداية

نحتاج بعد ذلك إلى تكوين الحزمة. من Xcode ، افتح ملف AppDelegate.m.

سنقوم بعد ذلك بإضافة #import "SplashScreen.h" مع الواردات الأخرى ثم نضيف [SplashScreen show] ؛ أعلى من YES ؛ فقط في طريقة didFinishLaunchingWithOptions.

أخيرًا ، في App.js ، نحتاج إلى إخبار شاشة البداية للاختباء بمجرد أن يكون تطبيقنا جاهزًا. سنفعل ذلك في ربط مكون دورة حياة مكون DidMount.

وو! تبدو جيدة. واحد نيتبيك الماضي. دعنا نضبط لون شريط الحالة على الإضاءة عند ظهور شاشة البداية. افتح Info.plist في Xcode وأضف صفًا جديدًا إليه. يجب أن يكون المفتاح "UIStatusBarStyle" والقيمة (سلسلة) إلى "UIStatusBarStyleLightContent".

تعيين شريط الحالة إلى اللون الأبيض

وهذا يتركنا مع الكمال

الكمال دائرة الرقابة الداخلية

إضافة شاشات البداية (Android)

Android هو لمسة أكثر تعقيدًا من نظام التشغيل iOS لأننا نحتاج إلى إنشاء شاشتين منفصلتين للرش. يتم استخدام أحدهما من خلال شاشة البداية التفاعلية ، ويتم استخدام الآخر قبل "تضخيم" التطبيق. قد يكون الأمر أيضًا أكثر صعوبة لأنني لست معتادًا على Android Studio.

أول ما نعتقد أننا سنقوم به هو إضافة أصول الصور التي قمت بتنزيلها مسبقًا إلى أدلة mipmap في مشروع android. يتعامل Android مع كثافات بكسل مختلفة مختلفة عن نظام التشغيل iOS ، لذا سيتعين علينا إجراء بعض التعديلات.

بادئ ذي بدء ، توجد مجلدات mipmap في android / app / src / main / res وكل كثافة بكسل لها كثافة مختلفة ملحقة باسم الدليل. هنا يجب أن تذهب الصور

  • mipmap-mdpi = icon.png
  • mipmap-hdpi = icon@2x.png
  • mipmap-xhdpi = icon@3x.png
  • mipmap-xxhdpi = icon@3x.png

بمجرد إعادة تسمية الملفات ، تكون icon.png بدلاً من ذلك.

صور أندرويد

بعد ذلك سنمضي قدمًا وننشئ شاشة البداية التي يتم عرضها عند بدء تشغيل التطبيق لأول مرة من البداية الباردة.

تتأثر هذه التعليمات بدرجة كبيرة بهذا الدليل الممتاز من خلال Big Nerd Ranch. وهذا ما يفسر السبب وراء ما نقوم به.

قم أولاً بإنشاء ملف background_splash.xml في android / app / src / main / res / drawable (من المحتمل أن تنشئ الدليل القابل للدخول).

أضف الكود التالي:

Background_splash.xml

ما نقوم به هنا هو إعداد قائمة طبقات (قائمة الطبقات) ثم تعيين لون الخلفية (الذي سنقوم بتحديده قريبًا) وأخيراً تقديم أيقونة لدينا. سيكون طول الأيقونة 200 نقطة في الثانية وواسعة النطاق ويتركز في الشاشة.

بعد ذلك ، سننشئ colours.xml في android / app / src / main / res / القيم التي سنعرف بها اللون الأزرق (وهو نفس اللون الأزرق في تطبيقنا).

ثم نقوم بإنشاء SplashTheme جديد في ملف android / app / src / main / res / values ​​/ styles.xml.

إننا نطلب منها استخدام background_splash الذي عرّفناه للتو على أنه خلفية النافذة ، كما أننا نطلب منها استخدام اللون الأزرق لشريط الحالة. أحاول محاكاة التطبيق الفعلي بأكبر قدر ممكن هنا ، وبالتالي يتغير شريط الحالة.

على الرغم من أننا هنا ، فلنتقدم ونضمن أن StatusBar الافتراضي لموضوع التطبيق الأساسي لدينا هو اللون الافتراضي أيضًا. هذا يتركنا مع styles.xml من:

الآن نحن بحاجة إلى إخبار تطبيقنا لاستخدام SplashTheme في البداية. سنفعل ذلك في AndroidManifest.xml. داخل إضافة

وتعديل MainActivity لتكون التالية. إيلاء اهتمام خاص لالروبوت: تصدير = "صحيح" أضفت.

هذا يتركني باستخدام AndroidManifest.xml يشبه

نحن الآن بحاجة إلى إنشاء ملف SplashActivity.java.

SplashActivity.java

الغرض من SplashActivity.java هذا هو إعادة التوجيه إلى MainActivity (تطبيق React Native). يجب أن تبدو هذه

الآن ، بافتراض أن كل شيء تم إعداده بشكل صحيح ، إذا قمت بتشغيل التطبيق ، فقمت بإنهائه (لذلك يجب أن تبدأ بداية باردة) سترى ما يلي.

بدء إطلاق الباردة

تبدو جيدة جدا! نحصل على شاشة الإطلاق على الفور ولكن بعد ذلك نحصل على الفلاش الأبيض مرة أخرى ...

إصلاحه ليس سهلاً على نظام التشغيل iOS ، ولكنه لا يزال غير صعب للغاية.

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

غزل إضافة رد فعل- الأصلي- plash-screen@3.0.6
رد فعل الرابط الأصلي

نحتاج بعد ذلك إلى تكوين جانب android الأصلي.

في MainActivity.java إضافة

ثم قم بتكوين App.js في التطبيق الخاص بك ، إذا لم تكن بالفعل ، لإغلاق شاشة البداية بمجرد تحميل التطبيق.

ستحتاج بعد ذلك إلى إنشاء launch_screen.xml (الاسم مهم!) داخل android / app / src / main / res / layout باستخدام عنصر أساسي في LinearLayout.

ملف تخطيط جديدإنشاء مع LinearLayout

يحتوي Android Studio على واجهة تشبه إلى حد كبير أداة إنشاء واجهة Xcode ، لكنني لست متأكدًا من كيفية عملها ، لذا سأقوم فقط بتعديل العناصر مباشرة.

أولاً ، سأقوم بضبط خطورة LinearLayout على المركز ولون الخلفية باللون الأزرق. الباقي هو الإعداد الافتراضي.

سأقوم بعد ذلك بتقديم ImageView لتقديم الرمز داخل LinearLayout.

حول الخصائص على ImageView.

  • android: layout_width ، android: layout_height - ضبط الطول والعرض. نريد أن تكون هي نفسها كما حددناها في background_splash.xml.
  • android: layout_marginTop - هذا هو ارتفاع شريط الحالة. إذا تجاهلنا ذلك ، فلن تكون الرموز في نفس المكان وستظهر لك "قفزة" عند تبديل شاشات البداية
  • android: src = "@ mipmap / icon" سيتم عرض الصورة

أخيرًا ، من داخل ملف colors.xml نحتاج إلى إضافة:

 # 4F6D7A 

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

أندرويد النجاح!

اتمنى ان تكون وجدت ذلك مفيدا!

شكرا لقراءة هذا البرنامج التعليمي! اسمي Spencer Carli - لقد أمضيت السنوات القليلة الماضية في التعلم والبناء مع React Native. أرسل بريدًا إلكترونيًا أسبوعيًا يحتوي على نصائح وحيل ودروس تعليمية حول إنشاء تطبيقات React Native كما جمعت أيضًا حفنة من الدورات التدريبية المتميزة لمساعدتك على إنشاء تطبيقات React Native أفضل بشكل أسرع.
هل تريد التحدث عن بناء تطبيقات React Native الرائعة؟ الوصول لي!