Android аромати, как да променяте иконите на вашата конструкция и активи въз основа на вкуса, като използвате същата кодова база.

Наскоро бях изправена пред задачата да използвам различен набор от активи в приложението, като запазвам същата база данни с кодове. И тази статия е за това как го реших.

Предполагам, че сте запознати с основните React-Native, знайте какво и са инсталирани Android Studio и ADB на вашата система.

Ще изградим тестово приложение с 2 аромата - Спондж Боб и Марио. Пълният изходен код за решение можете да намерите тук: https://github.com/niktechnopro/android_flavors.

Фаза 1.

Създайте RN приложение (не Expo):

  1. React-native init android_flavors (потребители на Mac OS - не забравяйте да добавите local.properties с път към SDK);
  2. Добавете папка с активи в корена на вашия проект и поставете 2 изображения към него - използвам mario.png и spongebob.png.
  3. Създайте икони за стартиране - стартирайте Android Studio, изберете от менюто, след това отворете папката android във вашия проект и отворете, след като проектът се отвори и gradle се синхронизира, за да улесните избора на върха:
избор на правилния изглед

4. След това отворете „app / src / main / res“, щракнете с десния бутон върху него, изберете New и след това изберете Image Asset (ако вашият проект не се синхронизира на открито - няма да видите тази опция) - и след това следвайте подкана за създаване на икони:

След това нека влезем в main / res / values ​​/ strings.xml и променим името на приложението на „Спондж Боб“

5. сега нека се опитаме да стартираме това приложение от командния ред и веднъж инсталиран на емулатор - проверете дали можете да иконата от може да се разглежда като икона за стартиране в емулатор с име „Спондж Боб“;

6. добавете аромат „mario“ - друга папка на същото ниво като основна и копирайте вътре папка от , така че структурата на вашата директория трябва да изглежда по-долу:

Структурата на проект

Не е необходимо да копирате всичко от , защото каквото и да липсва в , ще бъде автоматично по подразбиране , затова поставяме под само какво трябва да се промени в този аромат;

7. повторете стъпка <6>, но този път - да създадете икони за „mario / res“. Тогава нека влезем вътре в mario / res / values ​​/ strings.xml и променим името на приложението на „Mario“.

Фаза 2.

В тази фаза ще декларираме ароматите в и модифицирайте „скриптове“ в ,

  1. Как да промените описано тук: „https://developer.android.com/studio/build/build-variants#product-flavors“, така че ще следваме инструкциите и ще променяме нашите така:
build.gradle productFlavors

Тук създаваме 2 вкуса: „spongebob“ и „mario“ и за да разграничим тези компилации, ще добавим applicationIdSuffix към основното application applicationId / package name = „com.android_flavors“. така че финализираният пакет ще изглежда така: „com.android_flavors.spongebob“ и „com.android_flavors.mario“.

Gradle автоматично създава варианти на сглобяване въз основа на вашите типове изграждане и аромати на продукта и имена според - така че нека да добавим това към package.json под „скриптове“:

За тази демонстрация добавих само „Debug“ надстройки, така че не забравяйте да добавите скрипт, за да създадете пакет за освобождаване на вашия вкус, нещо подобно: <„android-bob-r“: „react-native run android - variant = spongebobRelease - appIdSuffix = Спонджбоб . Също така, за версията на изданието ще трябва да генерирате ключове за подписване - просто google как да направите това (много лесно е да подпишете приложението си с Android Studio)." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/raw3h/1586309503045.png" />
  1. Изпълнете команда „npm run android-bob“, за да изградите аромат на Спондж Боб, след като компилирането е изградено, ще видим приложението с име „Спондж Боб“ и съответната икона. След това стартирайте команда: (това ще изброи инсталираните пакети) в Terminal и трябва да видите пакета: „com.android_flavors.spongebob“;
  2. Сега изпълнете команда за да създадете аромат на Mario и повторете същите стъпки от по-горе 1), за да проверите.

В този момент трябва да имаме 2 вкуса на едно и също приложение, инсталирано с различни икони и имена на APP! - Хубаво, а?

Фаза 3.

В тази фаза ще добавим логика за показване на различни активи / изображения на HomePage на нашето приложение, в зависимост от инсталирания аромат. Просто ще прочетем името на пакета и ще посочим правилното изображение в активите.

Ще трябва да добавим персонализиран Native пакет, за да получим името на пакета и въз основа на това, за да създадем правилното изображение. Връзка за програмисти за Android: https://developer.android.com/reference/android/content/Context#getPackageName ();

Ще следваме тези стъпки, за да създадем Native Module, да прочетем името на пакета и след това да изпратим тази информация Bridge <-> JS> мост, така че можем да го използваме в нашата логика на APP.

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

  1. в - създайте нов клас - PackageReader.java и копирайте следното:

2. След това трябва да регистрираме Модула, за да можем да се обадим метод от JS, създайте друг клас, наречен и копирайте следното:

3. Декларирайте в MainApplication.java, така:

4. И накрая, нека добавим логика към нашия JS, за да създадем правилното изображение в зависимост от името на пакета, ето код I за компонента „начална страница“:

Обърнете внимание как чета пакета в компонентDidMount (можете да използвате ако предпочитате така).

Свършен!

Така че сега, в зависимост от вкуса на пакета, ще имаме заредени различни имена на пакети и различни активи:

Изпълнете сценария „npm run android-bob“ и получаваме:

И скриптът „npm run android-mario“ ще ни получи:

И ние имаме и двата аромата, инсталирани едновременно, тъй като те имат различни имена на пакети:

Наздраве!