كيفية إضافة أيقونات التطبيق وشاشات البداية إلى تطبيق React Native في التدريج والإنتاج

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

والمهمة التي لا يمكننا تجنبها هي إضافة رموز التطبيقات وشاشات البداية إلى تطبيقاتنا.

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

دعنا نطلق على تطبيقنا MyAppونقوم بتشغيله باستخدام react-native init MyApp. سيكون هناك بالطبع الكثير من المكتبات لمساعدتنا في إدارة البيئات المختلفة.

في هذا المنشور ، سنفعل مثلما فعلنا مع التطبيقات الأصلية ، حتى نعرف الخطوات الأساسية.

تكوين التكوين والهدف وأنواع البناء ونكهة الإنتاج ومتغير البناء

هناك بعض المصطلحات التي يجب أن نتذكرها. في نظام iOS ، يطلق على التصحيح والإصدارات تكوينات البناء ، ويطلق على التدريج والإنتاج أهداف.

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

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

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

أهداف التدريج والإنتاج في iOS

افتح من MyApp.xcodeprojالداخل iosباستخدام Xcode. إليك ما نحصل عليه بعد التمهيد:

تقوم React Native بإنشاء تطبيقات iOS و tvOS وهدفين اختباريين. في Xcode ، يمكن أن يحتوي المشروع على العديد من الأهداف ، وكل هدف يعني منتجًا فريدًا مع إعدادات البناء الخاصة به - Info.plist وأيقونات التطبيق.

هدف مكرر

إذا لم نكن بحاجة إلى تطبيق tvOS ، فيمكننا حذف MyApp-tvOSو MyApp-tvOSTests. دعونا نستخدم MyAppالهدف كبيئة إنتاج لدينا ، right click -> Duplicوأكلنا لجعل هدف آخر. دعنا نسمي it MyApp Stagجي.

يجب أن يكون لكل هدف معرف حزمة فريد. تغيير رمز الرزمة من MyAppل com.onmyway133.MyAppو MyApp Stagingل com.onmyway133.MyApp.Staging.

Info.plist

عندما MyApp targetنكرر ، يتكرر Xcode أيضًا Info.plistفي MyApp copy-Info.plistالهدف التدريجي. قم بتغييره إلى اسم أكثر وضوحًا Info-Staging.plistواسحبه إلى MyAppالمجموعة في Xcode للبقاء منظمًا. بعد سحب، MyApp Staging هدف لا يمكن العثور على بليست، لذلك انقر فوق Choose Info.plist Fileوأشر إلى Info-Staging.plist.

مخطط

يكرر Xcode أيضًا المخطط عندما نكرر الهدف ، لذلك نحصل على MyApp copy:

انقر Manage Schemesفي القائمة المنسدلة للمخطط لفتح مدير النظام:

عادةً ما أحذف MyApp copyالمخطط الذي تم إنشاؤه ، ثم أقوم بإنشاء مخطط جديد مرة أخرى MyApp Stagingللهدف. تحتاج إلى التأكد من تمييز المخطط على أنه مشترك حتى يتم تعقبه في git.

لسبب ما ، لا يحتوي مخطط التدريج على كل الأشياء التي تم إعدادها مثل مخطط الإنتاج. يمكنك مواجهة مشكلات مثل ‘React/RCTBundleURLProvider.h’ file not foundأو RN: ‘React/RCTBridgeModule.h’ file not found. ذلك لأن Reactالهدف لم يتم ربطه بعد.

لحلها ، يجب علينا تعطيل Parallelise Buildوإضافة Reactالهدف ونقله إلى أعلى MyApp Staging.

تدريج وإنتاج نكهات المنتجات في Android

افتح androidالمجلد في Android Studio. بشكل افتراضي ، لا يوجد سوى أنواع إصدارات التصحيح والإصدار:

تم تكوينها في appالوحدة النمطية build.gradle:

buildTypes { release { minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" }}

أولاً ، دعنا نغير معرف التطبيق com.onmyway133.MyAppلمطابقة iOS. إنه غير مطلوب ولكن أعتقد أنه من الجيد أن تظل منظمًا. ثم قم بإنشاء نكهتين للمنتج من أجل التدريج والإنتاج. من أجل التدريج ، دعنا نضيف .Stagingإلى معرف التطبيق.

من Android Studio 3 ، "يجب أن تنتمي جميع النكهات الآن إلى بُعد نكهة مسمى" - عادةً ما نحتاج فقط إلى أبعاد افتراضية. هنا هو كيف يبدو في build.gradleلدينا appوحدة:

android { compileSdkVersion rootProject.ext.compileSdkVersion buildToolsVersion rootProject.ext.buildToolsVersion flavorDimensions "default"
defaultConfig { applicationId "com.onmyway133.MyApp" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" ndk { abiFilters "armeabi-v7a", "x86" } } splits { abi { reset() enable enableSeparateBuildPerCPUArchitecture universalApk false // If true, also generate a universal APK include "armeabi-v7a", "x86" } } buildTypes { release { minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" } }
productFlavors { staging { applicationIdSuffix ".Staging" }
 production {
 } }}

انقر Sync Nowللسماح لـ gradle بالقيام بمهمة المزامنة. بعد ذلك ، يمكننا أن نرى أن لدينا أربعة متغيرات للبناء:

كيفية إدارة مرحلة الإنتاج والإنتاج

لتشغيل تطبيق Android ، يمكننا تحديد متغير مثل react-native run-android — variant=productionDebug، لكنني أفضل الانتقال إلى Android Studio ، وتحديد البديل ، والتشغيل.

لتشغيل تطبيق iOS ، يمكننا تحديد المخطط مثل react-native run-ios — simulator=’iPhone X’ — scheme=”MyApp Staging”. اعتبارا من react-native 0.57.0هذا لا يعمل. لكن لا يهم لأنني عادة ما أذهب إلى Xcode ، وأختار النظام ، وأعمل.

إضافة أيقونة التطبيق لنظام iOS

According to the Human Interface Guideline, we need app icons of different sizes for different iOS versions, device resolutions, and situations (notification, settings, Spring Board). I’ve crafted a tool called IconGenerator, which was previously mentioned in Best Open Source Tools For Developers. Drag the icon that you want — I prefer those with 1024x1024 pixels for high resolution app icons — to the Icon Generator MacOS app.

Click Generate and we get AppIcon.appiconset . This contains app icons of the required sizes that are ready to be used in Asset Catalog. Drag this to Asset Catalog in Xcode. That is for production.

For staging, it’s good practice to add a “Staging” banner so that testers know which is staging, and which is production. We can easily do this in Sketch.

Remember to set a background, so we don’t get a transparent background. For an app icon with transparent background, iOS shows the background as black which looks horrible.

After exporting the image, drag the staging icon to the IconGenerator the same way we did earlier. But this time, rename the generated appiconset to AppIcon-Staging.appiconset. Then drag this to Asset Catalog in Xcode.

For the staging target to use staging app icons, open MyApp Staging target and choose AppIcon-Staging as App Icon Source.

Add app icon for Android

I like to switch to Project view, as it is easier to change app icons. Click res -> New -> Image Asset to open Asset Studio. We can use the same app icons that we used in iOS:

Android 8.0 (API level 26) introduced Adaptive Icons so we need to tweak the Resize slider to make sure our app icons look as nice as possible.

يقدم Android 8.0 (مستوى API 26) أيقونات المشغل التكيفية ، والتي يمكنها عرض مجموعة متنوعة من الأشكال عبر طرازات الأجهزة المختلفة. على سبيل المثال ، يمكن أن تعرض أيقونة المشغل التكيفي شكلًا دائريًا على أحد أجهزة OEM ، وتعرض دائرة على جهاز آخر. يوفر كل من الشركة المصنعة للجهاز قناعًا ، يستخدمه النظام بعد ذلك لعرض جميع الرموز التكيفية بنفس الشكل. تُستخدم رموز المشغل التكيفية أيضًا في الاختصارات وتطبيق الإعدادات ومربعات حوار المشاركة وشاشة النظرة العامة. - مطوري أندرويد

نحن نقوم بالإنتاج أولاً ، وهو ما يعني mainدليل الدقة. ستحل هذه الخطوة محل أيقونات تطبيق العنصر النائب الحالية التي تم إنشاؤها بواسطة Android Studio عندما قمنا بتشغيل مشاريع React Native.

Now that we have production app icons, let’s make staging app icons. Android manages code and assets via convention. Click on src -> New -> Directory and create a staging folder. Inside staging, create a folder called res . Anything we place in staging will replace the ones in main — this is called source sets.

You can read more here: Build with source sets.

يمكنك استخدام أدلة مجموعة المصادر لاحتواء الكود والموارد التي تريد حزمها مع تكوينات معينة فقط. على سبيل المثال ، إذا كنت تقوم ببناء متغير بناء "demoDebug" ، وهو منتج متقاطع لنكهة منتج "تجريبي" ونوع بناء "تصحيح الأخطاء" ، فإن Gradle يلقي نظرة على هذه الأدلة ، ويمنحها الأولوية التالية: src/demoDebug/ (إنشاء مجموعة مصادر متغيرة ) src/debug/ (مجموعة مصدر نوع البناء) src/demo/ (مجموعة مصدر نكهة المنتج) src/main/ (مجموعة المصدر الرئيسية)

انقر بزر الماوس الأيمن على " staging/res -> New -> Imageالأصل" لإنشاء رموز التطبيق للتدريج. نستخدم أيضًا رموز تطبيقات التدريج نفسها كما هو الحال في نظام التشغيل iOS ، لكننا هذه المرة نستخدمها hoose sكدليل Res. بهذه الطريقة ، يعرف Android Studio كيفية إنشاء فرق erent ic_laمختلفة ووضعها في into sالاعتبار.

أضف شاشة التشغيل لنظام iOS

تسمى شاشة البداية شاشة التشغيل في نظام iOS ، وهي مهمة.

تظهر شاشة التشغيل فورًا عند بدء تشغيل التطبيق. يتم استبدال شاشة التشغيل بسرعة بالشاشة الأولى من تطبيقك ، مما يعطي انطباعًا بأن تطبيقك سريع وسريع الاستجابة

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

إطلاق الشاشة القصة المصورة

في الوقت الحالي ، الطريقة الموصى بها هي الاستخدام Launch Screen storyboard. يأتي مشروع iOS من React Native LaunchScreen.xibولكنه xibأصبح شيئًا من الماضي. دعونا نحذفه وننشئ ملفًا يسمى Launch Screen.storyboard.

انقر بزر الماوس الأيمن فوق MyAppالمجلد -> جديد واختر شاشة التشغيل ، وأضفها إلى كلا الهدفين كما نعرض عادةً نفس شاشة البداية لكل من التدريج والإنتاج.

مجموعة الصور

Open asset catalog, right click and select New Image Set . We can name it anything. This will be used in the Launch Screen.storyboard.

Open Launch Screen.storyboard and add an UIImageView . If you are using Xcode 10, click the Library button in the upper right corner and choose Show Objects Library.

Set image for Image View, and make sure Content Mode is set to Aspect Filled, as this ensures that the image always covers the full screen (although it may be cropped). Then connect ImageView using constraints to the View, not the Safe Area. You do this by Control+drag from the Image View (splash) to the View.

Constrains without margin

Click into each constraint and uncheck Relative to Margin. This makes our ImageView pin to the very edges of the view and with no margin at all.

Now go to both targets and select Launch Screen.storyboard as Launch Screen File:

On iOS, the launch screen is often cached, so you probably won’t see the changes. One way to avoid that is to delete the app and run it again.

Add a launcher theme for Android

There are several ways to add splash screen for Android, from using launcher themes, Splash Activity, and a timer. For me, a reasonable splash screen for Android should be a very minimal image.

As there are many Android devices with different ratios and resolutions, if you want to show a full screen splash image, it will probably not scale correctly for each device. This is just about UX.

For the splash screen, let’s use the launcher theme with splash_background.xml .

Learn about Device Metric

There is no single splash image that suits all Android devices. A more logical approach is to create multiple splash images for all common resolutions in portrait and landscape. Or we can design a minimal splash image that works. You can find more info here: Device Metric.

Here is how to add splash screen in 4 easy steps:

Add splash image

We usually need a common splash screen for both staging and production. Drag an image into main/res/drawble . Android Studio seems to have a problem with recognising some jpg images for the splash screen, so it’s best to choose png images.

Add splash_background.xml

Right click on drawable -> New -> Drawable resource file . Name it whatever you want — I choose splash_background.xml . Choose the root element as layer-list:

A Layer List means “a Drawable that manages an array of other Drawables. These are drawn in array order, so the element with the largest index is drawn on top”. Here is how splash_background.xml looks like:

Note that we point to our splash image we added earlier with android:src=”@drawable/iron_man”.

Declare style

Open styles.xml and add SplashTheme:

 @drawable/splash_background

Use SplashTheme

Go to Manifest.xml and change the theme of the the launcher activity, which has category android:name="android.intent.category.LAUNCHER" . Change it to android:theme="@style/SplashTheme" . For React Native, the launcher activity is usually MainActivity . Here is how Manifest.xml looks:

Run the app now and you should see the splash screen showing when the app starts.

Managing environment configurations

The differences between staging and production are just about app names, application ids, and app icons. We probably use different API keys, and backend URL for staging and production.

Right now the most popular library to handle these scenarios is react-native-config, which is said to “bring some 12 factor love to your mobile apps”. It requires lots of steps to get started, and I hope there is a less verbose solution.

Where to go from here

In this post, we touched Xcode and Android Studio more than Visual Studio Code, but this was inevitable. I hope this post was useful to you. Here are some more links to read more about this topic:

  • Add App Icons and Launch Screens to React Native Apps (iOS & Android)
  • How to Add a Splash Screen to a React Native App (iOS and Android)
  • Managing Configuration in React Native
  • إضافة خطوط أنابيب مستهدفة متعددة لـ React Native Apps (ونشر Fastlane CircleCI) pt. 1
  • دليل شاشة Android Splash (الكامل)

إذا أعجبك هذا المنشور ، ففكر في زيارة مقالاتي وتطبيقاتي الأخرى؟