Android Flavours ، كيفية تغيير أيقونات جهازك وأصوله بناءً على النكهة باستخدام نفس قاعدة الكود.

واجهت مؤخرًا مهمة استخدام مجموعة مختلفة من الأصول في التطبيق ، مع الاحتفاظ بنفس قاعدة التعليمات البرمجية. وتتناول هذه المقالة كيفية حلها.

أفترض أنك على دراية بـ React-Native الأساسي ، اعرف ماذا و هي تثبيت Android Studio و ADB على نظامك.

سنقوم ببناء تطبيق اختبار مع نكهتين - Sponge Bob و Mario. يمكن العثور على رمز مصدر الحل الكامل هنا: https://github.com/niktechnopro/android_flavors.

المرحلة 1.

إنشاء تطبيق RN (وليس معرض):

  1. رد فعل التهيئة android_flavors (مستخدمو Mac OS - لا تنسوا إضافة local.properties مع المسار إلى SDK) ؛
  2. أضف مجلد الأصول في جذر مشروعك وضع صورتين عليه - أستخدم mario.png و spongebob.png.
  3. إنشاء أيقونات الإطلاق - قم بتشغيل Android Studio ، اختر من القائمة ، ثم انتقل إلى مجلد Android داخل مشروعك وافتحه ، بمجرد فتح المشروع ومزامنة التقدير ، لتسهيل الاختيار في الأعلى:
اختيار الرأي الصحيح

4. ثم انتقل إلى "app / src / main / res" ، وانقر بزر الماوس الأيمن عليها ، واختر جديد ثم حدد Image Asset (إذا لم تتم مزامنة مشروعك عند الفتح - فلن ترى هذا الخيار) - ثم اتبع المطالبة بإنشاء أيقونات:

ثم دعنا نذهب داخل main / res / القيم / strings.xml ونغير اسم التطبيق إلى

5. الآن دعنا نحاول تشغيل هذا التطبيق من سطر الأوامر وبمجرد تثبيته على المحاكي - تحقق من أنه يمكنك الرمز يمكن رؤيته كرمز إطلاق في المحاكي باسم "Sponge Bob" ؛

6. إضافة نكهة "ماريو" - مجلد آخر على نفس المستوى الرئيسي ونسخ داخل مجلد من ، لذلك يجب أن تبدو بنية الدليل كما يلي:

هيكل مشروع

لا تحتاج لنسخ كل شيء من ، لأن كل ما هو مفقود في ، سيتم التقصير تلقائيًا في ، لذلك نضع تحت فقط ما يجب تغييره في هذه النكهة ؛

7. كرر الخطوة <6> ، ولكن هذه المرة - لإنشاء أيقونات لـ "mario / res". ثم دعنا نذهب داخل mario / res / القيم / strings.xml وقم بتغيير اسم التطبيق إلى "Mario".

المرحلة 2.

في هذه المرحلة ، سنعلن النكهات وتعديل "البرامج النصية" في .

  1. كيفية التعديل الموصوف هنا: "https://developer.android.com/studio/build/build-variants#product-flavors" ، لذلك سنتبع التعليمات ونعدل مثل ذلك:
منتج build.gradle النكهات

ننشئ هنا نكهتين: "سبونجبوب" و "ماريو" ، وللتمييز بين هذه البنى ، سنضيف applicationIdSuffix إلى applicationId / package name الرئيسي "" com.android_flavors ". لذلك ستبدو الحزمة النهائية كالتالي: "com.android_flavors.spongebob" و "com.android_flavors.mario".

يقوم Gradle تلقائيًا بإنشاء متغيرات بناء بناءً على أنواع البناء الخاصة بك ونكهات المنتج ، والأسماء وفقًا - لذلك دعنا نمضي قدما في إضافة ذلك إلى package.json تحت “scripts”:

في هذا العرض التوضيحي ، أضفت فقط تصميمات . أيضًا ، بالنسبة إلى إصدار الإصدار ، ستحتاج إلى إنشاء مفاتيح توقيع - فقط google كيفية القيام بذلك (من السهل جدًا توقيع تطبيقك باستخدام Android Studio)." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/raw3h/1586309503045.png" />
  1. قم بتشغيل الأمر “npm run android-bob” لبناء نكهة Sponge Bob ، بعد إنشاء copleted ، سنرى التطبيق باسم “Sponge Bob” والرمز الخاص به. ثم قم بتشغيل الأمر: (هذا يسرد الحزم المثبتة) في Terminal وسترى الحزمة: "com.android_flavors.spongebob" ؛
  2. الآن قم بتشغيل الأمر لبناء نكهة ماريو ، وتكرار نفس الخطوات من فوق 1) للتحقق.

في هذه المرحلة يجب أن يكون لدينا نوعان من النكهات من نفس التطبيق مثبت بأيقونات وأسماء APP مختلفة! - جميل ، هاه؟

المرحلة 3.

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

سنحتاج إلى إضافة حزمة Native مخصصة للحصول على اسم الحزمة وبناءً على ذلك لإنتاج الصورة الصحيحة. رابط مطور Android: https://developer.android.com/reference/android/content/Context#getPackageName () ؛

سنتبع هذه الخطوات لإنشاء الوحدة الأصلية ، وقراءة اسم الحزمة ، ثم إرسال هذه المعلومات مرة أخرى Bridge <-> JS> Bridge ، حتى نتمكن من استخدامه داخل منطق APP الخاص بنا.

https://reactnative.dev/docs/native-modules-android

  1. في - إنشاء فئة جديدة - PackageReader.java ، ونسخ ما يلي إليها:

2. بعد ذلك ، يتعين علينا تسجيل الوحدة ، حتى نتمكن من الاتصال طريقة من JS ، قم بإنشاء فئة أخرى تسمى وانسخ ما يلي:

3. نعلن في MainApplication.java ، مثل:

4. وأخيرًا ، دعنا نضيف منطقًا إلى JS لإنتاج الصورة الصحيحة اعتمادًا على اسم الحزمة ، إليك رمز I لمكون "الصفحة الرئيسية":

لاحظ كيف قرأت الحزمة في ComponDidMount (يمكنك استخدامها إذا كنت تفضل ذلك).

منجز!

لذلك الآن ، اعتمادًا على نكهة الحزمة ، سيكون لدينا أسماء حزم مختلفة وأصول مختلفة تم تحميلها:

تشغيل البرنامج النصي "npm run android-bob" ونحصل على:

والنص البرمجي "npm run android-mario" سيجعلنا:

ولدينا كل من هذه النكهات مثبتة في وقت واحد ، لأن لديهم أسماء حزم مختلفة:

في صحتك!