Sabors d’Android, com canviar les icones de la vostra creació i actius en funció del sabor mitjançant la mateixa base de codi.

Fa poc vaig tenir la tasca d’utilitzar un conjunt d’actius diferents en aplicació, mantenint la mateixa base de codi. I aquest article tracta de com ho vaig solucionar.

Suposo que estàs familiaritzat amb els reactius bàsics i són, teniu Android Studio i ADB instal·lats al vostre sistema.

Crearem una aplicació de prova amb 2 sabors: Bob Esponja i Mario. El codi font complet de la solució es troba aquí: https://github.com/niktechnopro/android_flavors.

Fase 1

Creeu una aplicació RN (no Expo):

  1. React-native init android_flavors (usuaris de Mac OS; no us oblideu d'afegir locals.properties amb ruta a SDK);
  2. Afegiu la carpeta d'actius a l'arrel del projecte i hi poseu dues imatges. Jo faig servir mario.png i spongebob.png.
  3. Creeu icones de llançament: engegueu Android Studio, trieu des del menú, després aneu a la carpeta d'Android dins del vostre projecte i obriu un cop obert el projecte i es sincronitzeu el nivell per facilitar-vos la tria al cim:
escollint la vista adequada

4. A continuació, navegueu a "app / src / main / res", feu clic amb el botó dret a sobre, trieu Nou i, a continuació, selecciona Image Asset (si el vostre projecte no es sincronitzava a la vista, no veureu aquesta opció) i, a continuació, seguiu el símbol de creació de les icones:

A continuació, anem dins de la secció principal / res / values ​​/ strings.xml i canviem el nom de l’app a “Bob Esponja”.

Ara intentem executar aquesta aplicació des de la línia d'ordres i un cop instal·lat a l'emulador, comproveu que podeu obtenir la icona es pot veure com la icona de llançament a l'emulador amb el nom de "Bob Esponja";

6. Afegiu el sabor "mario" - una altra carpeta al mateix nivell que principal i còpia-la dins carpeta des de de manera que l'estructura del vostre directori hauria de semblar a continuació:

L’estructura de projecte

No cal que ho copieu tot , perquè hi falta el que sigui , s'imposarà automàticament a , així que ens sotmetem només cal canviar aquest sabor;

7. repeteix el pas <6>, però aquesta vegada: per crear icones per a "mario / res". A continuació, anem dins de mario / res / values ​​/ strings.xml i canviem el nom de l’app a “Mario”.

Fase 2

En aquesta fase, declararem sabors a i modificar "scripts" a .

  1. Com modificar descrit aquí: "https://developer.android.com/studio/build/build-variants#product-flavors", així que seguirem les instruccions i modificarem les nostres així:
build.gradle product Sabors

Aquí creem 2 sabors: "spongebob" i "mario", i per diferenciar aquests comptes, afegirem applicationIdSuffix a l'aplicació principal applicationId / package name = "com.android_flavors". de manera que el paquet finalitzat podria semblar així: “com.android_flavors.spongebob” i “com.android_flavors.mario”.

Gradle crea automàticament variants de creació basats en els vostres tipus de construcció i en els vostres sabors de producte i els vostres noms Per tant, anem a afegir-ho a package.json a "scripts":

A aquesta demostració només he afegit construccions . A més, per a la versió de llançament, haureu de generar claus de signatura: només cal fer Google com fer-ho (és molt fàcil signar la vostra aplicació amb Android Studio)." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/raw3h/1586309503045.png" />
  1. Executeu el comandament “npm run android-bob” per crear el sabor de Bob Esponja, després de la creació copletada, veurem l’APP amb el nom “Bob Esponja” i la icona respectiva. A continuació, executeu l'ordre: (enumerarà els paquets instal·lats) al Terminal i haureu de veure el paquet: “com.android_flavors.spongebob”;
  2. Ara executeu el comandament per crear el sabor de Mario i repetir els mateixos passos per sobre de 1) per verificar.

En aquest moment hauríem de tenir 2 sabors d’una mateixa APP instal·lats amb icones i noms d’APP diferents! - Bonic, no?

Fase 3

En aquesta fase, afegirem lògica per mostrar diferents actius / imatges a HomePage de la nostra APP, segons el sabor instal·lat. Simplement llegirem el nom del paquet i assenyalarem la imatge correcta en actiu.

Haurem d’afegir un paquet natiu personalitzat per obtenir el nom del paquet i en funció d’aquest per produir la imatge adequada. Enllaç per a desenvolupadors d'Android: https://developer.android.com/reference/android/content/Context#getPackageName ();

Seguirem aquests passos per crear el mòdul natiu, llegirem el nom del paquet i, a continuació, enviem aquesta informació Bridge <-> JS> bridge, de manera que el podem utilitzar dins de la nostra lògica APP.

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

  1. Dins - creeu una nova classe - PackageReader.java, i copieu-la a la secció següent:

2. A continuació, hem de registrar el mòdul, de manera que podem trucar mètode de JS, creeu una altra classe anomenada i copieu el següent:

3. Declarar a MainApplication.java, així:

4. I, finalment, afegim lògica a la nostra JS per produir la imatge adequada en funció del nom del paquet, aquí hi ha un codi I per al component “pàgina inicial”:

Tingueu en compte com he llegit el paquet a componentDidMount (que podeu utilitzar si ho prefereixes).

Fet!

Així, ara, segons el sabor del paquet, tindrem diferents noms de paquets i diferents actius carregats:

Executeu el guió “npm run android-bob” i obtenim:

I el guió "npm run android-mario" ens aconseguirà:

I tenim aquests dos sabors instal·lats simultàniament, ja que tenen diferents noms de paquets:

Salutacions!