Android Flavors: hogyan változtathatja meg az építkezés és az eszközök ikonjait az aroma alapján ugyanazon kódbázis felhasználásával.

A közelmúltban azzal a feladattal szembesültem, hogy más eszközkészletet használjunk az alkalmazásban, ugyanakkor ugyanazt a kódbázist tartva. És ez a cikk arról szól, hogyan oldottam meg.

Feltételezem, hogy ismeri az alapvető React-Native-t, tudja mit és vannak, az Android Studio és az ADB telepítve van-e a rendszerére.

Építünk egy tesztalkalmazást 2 ízekkel - Spongya Bob és Mario. A teljes megoldás forráskódja itt található: https://github.com/niktechnopro/android_flavors.

1. fázis

RN alkalmazás létrehozása (nem az Expo):

  1. React natív init android_flavors (Mac OS felhasználók - ne felejtsük el hozzáadni a helyi.properties fájlokat az SDK elérési útjához);
  2. Adjon hozzá eszközöket a projekt gyökeréhez, és tegyen rá 2 képet - a mario.png és a spongebob.png fájlokat használom.
  3. Indítási ikonok létrehozása - indítsa el az Android Studio alkalmazást, válassza a lehetőséget menüből, keresse meg a projekt belsejében található android mappát, és nyissa meg, miután a projekt megnyílt és a szinkronizálva lett a könnyebb választás felül:
a megfelelő nézet kiválasztása

4. Ezután keresse meg az „app / src / main / res” pontot, kattintson rá jobb egérgombbal, válassza az Új lehetőséget, majd válassza az Image Asset-t (ha a projekt nem szinkronizálódott nyitott állapotban - ezt a lehetőséget nem fogja látni) -, majd kövesse az Ikonok létrehozásának kérése:

Akkor menjünk a main / res / értékek / strings.xml fájlba, és változtassuk meg az app_nevet „Spongyabob” -ra.

5. Most próbáljuk meg futtatni ezt az alkalmazást a parancssorból és miután telepítve lett az emulátorra - ellenőrizze, hogy képes-e az ikonra indító ikonként tekinthető az emulátorban, „Spongya Bob” névvel;

6. Adja hozzá a „mario” ízt - egy másik mappát a fő szinttel megegyező szintre, és másolja be a belső oldalára mappát a , így a könyvtárstruktúrának az alábbiak szerint kell kinéznie:

A felépítés program

Nem kell mindent lemásolnia , mert bármi hiányzik belőle , automatikusan alapértelmezett értékre vált , így alávetjük csak ezt kell megváltoztatni ebben az ízben;

7. ismételje meg a <6> lépést, de ezúttal - a „mario / res” ikon létrehozásához. Akkor menjünk be a mario / res / értékek / strings.xml fájlba, és változtassuk meg az app_name-t "Mario" -ra.

2. fázis.

Ebben a szakaszban az ízeket bejelenti és módosítsa a "szkripteket" a .

  1. Hogyan kell módosítani itt leírtuk: “https://developer.android.com/studio/build/build-variants#product-flavors”, tehát követni fogjuk az utasításokat, és módosítani kell tetszik:
build.gradle productFlavors

Itt két ízet hozunk létre: „spongebob” és „mario”, és hogy megkülönböztessük ezeket az építményeket, az applicationIdSuffix alkalmazást hozzáadjuk a fő alkalmazáshoz applicationId / csomag neve = „com.android_flavors”. így a véglegesített csomag úgy néz ki, mintha: „com.android_flavors.spongebob” és „com.android_flavors.mario”.

A Gradle automatikusan létrehoz szerkesztési változatokat az építkezés típusa és a termék ízlése alapján, valamint a nevek alapján - szóval járjunk hozzá, hogy ezt hozzáadjuk a package.json-hoz „szkriptek” alatt:

Ehhez a demohoz csak a „Debug” összeállítást adtam hozzá, ezért ne felejtsük el hozzá az ízesítés kiadási csomagjának létrehozásához szükséges parancsfájlt, ehhez hasonlót: <”android-bob-r”: “reagálás natív futtatása android - variant = spongebobRelease - appIdSuffix = spongebob”>. Ezenkívül a kiadási verzióhoz aláíró kulcsokat kell generálni - csak a google-t kell megtenni (ezt nagyon könnyű aláírni az alkalmazásodra az Android Studio segítségével).
  1. Futtassa az „npm run android-bob” parancsot a Spongya Bob ízének felépítéséhez. Az összeépítés után a „Spongya Bob” nevű APP-t és a megfelelő ikont látjuk. Ezután futtassa a parancsot: (ez felsorolja a telepített csomagokat) a Terminálon, és látnia kell a csomagot: “com.android_flavors.spongebob”;
  2. Most futtasd a parancsot hogy felépítse a Mario ízét, és ismételje meg ugyanazokat a lépéseket fentről 1) az ellenőrzéshez.

Ezen a ponton 2 íznek kell lennie ugyanabból az alkalmazásból, különféle ikonokkal és APP nevekkel telepítve! - Szép, mi?

3. fázis.

Ebben a szakaszban hozzáadunk egy logikát, amely különféle eszközöket / képeket jelenít meg az alkalmazásunk HomePage oldalán, a telepített íztől függően. Egyszerűen elolvassa a csomag nevét, és mutat a jobb képre az eszközökben.

Szükségünk lesz egyéni natív csomag hozzáadására, hogy megkapjuk a csomag nevét, és ennek alapján előállítsuk a megfelelő képet. Android fejlesztői link: https://developer.android.com/reference/android/content/Context#getPackageName ();

Ezeket a lépéseket követve elkészítjük a natív modult, elolvassuk a csomag nevét, majd elküldjük ezt az információt Bridge <-> JS> híd, így felhasználhatjuk azt az APP logikánkon belül.

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

  1. Ban ben - hozzon létre új osztályt - PackageReader.java, és másolja rá az alábbiakat:

2. Ezután regisztrálnunk kell a modult, hogy felhívhassuk módszerrel a JS-ből, hozzon létre egy újabb osztályt és másolja a következőket:

3. Nyilatkozzon a MainApplication.java webhelyen, például:

4. És végül, adjunk hozzá logikát a JS-hez, hogy a csomag nevétől függően a megfelelő képet hozzuk létre. Íme egy „home page” összetevő I. kódja:

Vegye figyelembe, hogy miként olvastam a csomagot a komponentDidMount-ban (használhatja ha úgy tetszik).

Kész!

Tehát most, a csomag ízétől függően, különböző csomagneveket és különféle eszközöket töltünk be:

Futtassa az „npm run android-bob” szkriptet, és kapunk:

És az „npm run android-mario” szkript minket megkap:

És Önnek mindkét íze egyidejűleg telepítve van, mivel különböző csomagneveik vannak:

Egészségére!