Android Flavors, πώς να αλλάζετε τα εικονίδια της κατασκευής σας και τα στοιχεία που βασίζονται στη γεύση χρησιμοποιώντας την ίδια βάση κώδικα.

Πρόσφατα ήμουν αντιμέτωπος με το καθήκον να χρησιμοποιήσω ένα διαφορετικό σύνολο περιουσιακών στοιχείων σε εφαρμογή, διατηρώντας παράλληλα το ίδιο κώδικα. Και αυτό το άρθρο είναι για το πώς το έχω λύσει.

Υποθέτω ότι είστε εξοικειωμένοι με το βασικό React-Native, ξέρετε τι και είναι, έχουν εγκατασταθεί το Android Studio και το ADB στο σύστημά σας.

Θα δημιουργήσουμε μια εφαρμογή δοκιμής με 2 γεύσεις - Sponge Bob και Mario. Ο πλήρης πηγαίος κώδικας λύσεων μπορεί να βρεθεί εδώ: https://github.com/niktechnopro/android_flavors.

Φάση 1.

Δημιουργία εφαρμογής RN (όχι Expo):

  1. Αντιδραστική init android_flavors (χρήστες Mac OS - μην ξεχάσετε να προσθέσετε τοπικές ιδιότητες με διαδρομή προς το SDK).
  2. Προσθέστε το φάκελο στοιχείων στη ρίζα του έργου σας και τοποθετήστε 2 εικόνες σε αυτό - χρησιμοποιώ το mario.png και το spongebob.png.
  3. Δημιουργήστε εικονίδια εκκίνησης - εκκινήστε το Android Studio, επιλέξτε από το μενού και, στη συνέχεια, μεταβείτε στο φάκελο του Android στο εσωτερικό του έργου και ανοίξτε, μόλις το έργο ανοίξει και ο συγχρονισμός συγχρονιστεί, για να είναι πιο εύκολο να επιλέξετε στην κορυφή:
επιλέγοντας τη σωστή θέα

4. Στη συνέχεια, μεταβείτε στο "app / src / main / res", κάντε δεξί κλικ πάνω του, επιλέξτε Νέο και στη συνέχεια επιλέξτε Image Asset (εάν το έργο σας δεν συγχρονίστηκε ανοιχτά - δεν θα δείτε αυτή την επιλογή) η προτροπή για δημιουργία εικονιδίων:

Στη συνέχεια, μπείτε στο κύριο / res / values ​​/ strings.xml και αλλάξτε το όνομα_εφαρμογής στο

5. Τώρα ας επιχειρήσουμε να εκτελέσουμε αυτή την εφαρμογή από τη γραμμή εντολών και μόλις εγκατασταθεί στον εξομοιωτή - βεβαιωθείτε ότι μπορείτε να το εικονίδιο από μπορεί να θεωρηθεί ως εικονίδιο εκκίνησης στον εξομοιωτή με το όνομα "Sponge Bob".

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.grayl productFlavors

Εδώ δημιουργούμε 2 γεύσεις: "spongebob" και "mario", και για να διαφοροποιήσουμε αυτές τις κατασκευές θα προσθέσουμε το appIdSuffix στην κύρια εφαρμογή appId / package name = "com.android_flavors". έτσι ώστε το τελικό πακέτο να μοιάζει με αυτό: "com.android_flavors.spongebob" και "com.android_flavors.mario".

Το Gradle δημιουργεί αυτόματα παραλλαγές κατασκευών με βάση τους τύπους κατασκευής και τις γεύσεις των προϊόντων σας, καθώς και ονόματα σύμφωνα με το - έτσι ας προχωρήσουμε προσθέτουμε ότι στο package.json κάτω από "scripts":

Για αυτό το demo έχω προσθέσει μόνο . Επίσης, για έκδοση έκδοσης, θα χρειαστεί να δημιουργήσετε κλειδιά υπογραφής - μόνο google πώς να το κάνετε αυτό (είναι πολύ εύκολο να υπογράψετε το APP με το Android Studio)." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/raw3h/1586309503045.png" />
  1. Εκτελέστε την εντολή "npm run android-bob" για να δημιουργήσετε το άρωμα Sponge Bob, μετά την κατασκευή του copleted, θα δούμε την APP με το όνομα "Sponge Bob" και αντίστοιχο εικονίδιο. Στη συνέχεια, εκτελέστε την εντολή: (θα εμφανιστούν τα εγκατεστημένα πακέτα) στο Terminal και θα δείτε το πακέτο: "com.android_flavors.spongebob".
  2. Τώρα εκτελέστε εντολή για να οικοδομήσουμε γεύση Mario, και επαναλάβετε τα ίδια βήματα από τα παραπάνω 1) για να επαληθεύσετε.

Σε αυτό το σημείο θα πρέπει να έχουμε 2 γεύσεις της ίδιας APP εγκατεστημένες με διαφορετικά εικονίδια και ονόματα APP! - Ωραία, ε;

Φάση 3.

Σε αυτή τη φάση θα προσθέσουμε λογική για να δείξουμε διαφορετικά στοιχεία / εικόνες στο HomePage της APP μας, ανάλογα με την εγκατεστημένη γεύση. Θα διαβάσουμε απλά το όνομα του πακέτου και θα δείξουμε τη σωστή εικόνα στα στοιχεία.

Θα χρειαστεί να προσθέσουμε προσαρμοσμένο πακέτο Native για να πάρουμε το όνομα του πακέτου και με βάση αυτό για να παράγουμε τη σωστή εικόνα. Σύνδεσμος προγραμματιστή Android: https://developer.android.com/reference/android/content/Context#getPackageName ();

Θα ακολουθήσουμε αυτά τα βήματα για να δημιουργήσουμε τη Native Module, θα διαβάσουμε το όνομα του πακέτου και μετά θα στείλουμε αυτές τις πληροφορίες Bridge <-> JS> γέφυρα, έτσι μπορούμε να το χρησιμοποιήσουμε μέσα στην λογική APP.

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

  1. Σε - Δημιουργήστε νέα Class - PackageReader.java και αντιγράψτε τα ακόλουθα σε αυτήν:

2. Στη συνέχεια, πρέπει να καταχωρήσουμε την ενότητα, έτσι μπορούμε να καλέσουμε από τη μέθοδο JS, δημιουργήστε μια άλλη κλάση που ονομάζεται και αντιγράψτε τα εξής:

3. Δηλώστε στο MainApplication.java, όπως και έτσι:

4. Και τέλος, ας προσθέσουμε λογική στο JS μας για να παράγουμε τη σωστή εικόνα ανάλογα με το όνομα του πακέτου, εδώ είναι ένας κωδικός I για την "αρχική σελίδα" component:

Σημειώστε πώς διάβασα το πακέτο στο componentDidMount (μπορείτε να το χρησιμοποιήσετε αν προτιμάτε κάτι τέτοιο).

Εγινε!

Έτσι, τώρα, ανάλογα με τη γεύση του πακέτου, θα έχουμε διαφορετικά ονόματα πακέτων και διαφορετικά στοιχεία ενεργητικού φορτωμένα:

Εκτελέστε το σενάριο "npm run android-bob" και παίρνουμε:

Και το σενάριο "npm run android-mario" θα μας φέρει:

Και έχετε και τις δύο γεύσεις εγκατεστημένες ταυτόχρονα, καθώς έχουν διαφορετικά ονόματα πακέτων:

Στην υγειά σας!