Android Flavors, як змяніць абразкі пабудовы і актываў на аснове густу, выкарыстоўваючы тую ж базу кода.

Нядаўна я сутыкнуўся з задачай выкарыстоўваць іншы набор актываў у дадатку, захоўваючы тую ж базу кода. І гэты артыкул пра тое, як я яе вырашыў.

Я мяркую, што вы знаёмыя з асноўнымі React-Native, ведаеце што і ёсць, у вашай сістэме ўстаноўлены Android Studio і ADB.

Мы пабудуем тэставае прыкладанне з двума водарамі - Губка Боб і Марыё. Поўны зыходны код рашэння можна знайсці тут: 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", пстрыкніце правай кнопкай мышы, выберыце "Новы", а затым выберыце "Актыўнасць малюнкаў" (калі ваш праект не будзе сінхранізавацца на адкрытым месцы - вы не ўбачыце гэтую опцыю) - і далей выконвайце падказка для стварэння значкоў:

Затым пераходзім да галоўнага / res / значэння / 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 да галоўнага applicationId / пакета = = com.android_flavors. таму завершаны пакет будзе выглядаць прыблізна так: "com.android_flavors.spongebob" і "com.android_flavors.mario".

Gradle аўтаматычна стварае варыянты зборкі на аснове тыпаў зборкі і густаў прадукту і назваў у адпаведнасці з - так што давайце наперад дадамо яго да package.json пад "сцэнарыямі":

Для гэтай дэманстрацыі я толькі дадаў зборкі . Таксама для версіі версіі спатрэбіцца генераваць ключы для падпісання - проста запусціце Google, як гэта зрабіць (вельмі проста падпісаць прыкладанне з Android Studio)." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/raw3h/1586309503045.png" />
  1. Запусціце каманду "npm run android-bob", каб стварыць губку Губкі Боба, пасля зборкі злітаваны, мы ўбачым дадатак з імем "Sponge Bob" і адпаведным значком. Затым запусціце каманду: (у гэтым спісе будзе ўсталяваны пакет) у Terminal, і вы павінны ўбачыць пакет: "com.android_flavors.spongebob";
  2. Цяпер запусціце каманду стварыць водар Марыё і паўтарыць тыя ж крокі зверху 1) для праверкі.

На гэты момант у нас павінна быць 2 густу таго ж прыкладання, усталяванага з рознымі значкамі і назвамі прыкладанняў! - Прыемна, так?

3 этап.

У гэтым этапе мы будзем дадаць логіку, каб паказваць розныя актывы / выявы на HomePage нашага прыкладання, у залежнасці ад усталяванага водару. Мы проста прачытаем імя пакета і ўкажам на правільнае малюнак у актывах.

Для атрымання патрэбнага малюнка нам трэба будзе дадаць уласны Native пакет, каб атрымаць імя пакета. Спасылка для распрацоўшчыкаў Android: https://developer.android.com/reference/android/content/Context#getPackageName ();

Мы будзем выконваць наступныя дзеянні, каб стварыць Native Module, прачытаць імя пакета, а потым адправіць гэтую інфармацыю Bridge <-> JS> bridge, таму мы можам выкарыстоўваць яго ў рамках нашай логікі прыкладання.

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" атрымае нас:

І ў вас ёсць абодва густу, усталяваныя адначасова, бо яны маюць розныя назвы пакета:

Ура!