Modifier dynamiquement l'icône du lanceur d'applications dans React Native

Avez-vous déjà utilisé Tinder ? si oui, l'icône de l'application a une couleur de base rose , mais lorsqu'un utilisateur passe à l' abonnement Gold , l' icône change pour refléter ce niveau d'abonnement sans nécessiter le téléchargement d'une nouvelle application.

Aujourd'hui, nous allons explorer un package npm sympa appelé react-native-change-iconqui nous permet de changer sans effort l'icône de notre application. Excitant, non ? Plongeons-nous et voyons comment nous pouvons l'utiliser !

️ Mise en place

Pour commencer, ouvrons votre CLI et dirigez-vous vers votre répertoire de projet. Une fois que vous y êtes, lancez cette commande :

npm i react-native-change-icon

yarn add react-native-change-icon

Maintenant que vous avez vos icônes d'application, dirigeons-nous vers le répertoire " android " de votre projet, suivi des android ->app -> src -> main -> res -> mipmap-*répertoires, et ajoutez toutes les icônes dont vous avez besoin.

Lorsque vous avez terminé d'ajouter les icônes, jetez un œil à votre dossier ; il devrait apparaître quelque chose comme ça.

Pour mettre à jour votre fichier AndroidManifest.xml, ajoutez simplement un alias d'activité pour chacune de vos icônes d'application comme celle-ci !

<activity-alias
     android:name="com.rndynamicicon.MainActivitylogo_1"
     android:enabled="false"
     android:exported="true"
     android:icon="@mipmap/logo_1"
     android:targetActivity=".MainActivity">
     <intent-filter>
       <action android:name="android.intent.action.MAIN" />
       <category android:name="android.intent.category.LAUNCHER" />
     </intent-filter>
</activity-alias>

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

 <uses-permission android:name="android.permission.INTERNET" />

 <application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/logored"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity" />
     <activity-alias
         android:name="com.rndynamicicon.MainActivitylogo_1"
         android:enabled="false"
         android:exported="true"
         android:icon="@mipmap/logo_1"
         android:targetActivity=".MainActivity">
         <intent-filter>
           <action android:name="android.intent.action.MAIN" />
           <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
    </activity-alias>
    <activity-alias
       android:name="com.rndynamicicon.MainActivitylogo_2"
       android:enabled="false"
       android:exported="true"
       android:icon="@mipmap/logo_2"
       android:targetActivity=".MainActivity">
       <intent-filter>
         <action android:name="android.intent.action.MAIN" />
         <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
    </activity-alias>
 </application>
</manifest>

Note:

1. Si vous utilisez des liens profonds dans l'application, veuillez les mettre dans tous les alias d'activité.
2. Un seul alias d'activité doit être activé initialement, sinon il créera plusieurs icônes de lancement au moment du lancement de l'application.
3. Devrait activer l'alias d'activité par défaut que nous voulons afficher lors du premier lancement de l'application.
4. Si vous souhaitez un nom différent avec chaque icône de lanceur, vous pouvez également modifier le nom de l'étiquette dans chaque alias d'activité.

1. Tout d'abord, allez dans le ios/dossier et faites pod install.
2. Ouvrez votre application dans Xcode et ajoutez un AppIconsgroupe à votre application.

4. Ouvrez le Info.plistfichier.

5. Ajouter Icon files (iOS 5)à la liste des propriétés d'informations.

6. Ajoutez CFBundleAlternateIconsen tant que dictionnaire aux fichiers d'icônes (iOS 5) car il est utilisé pour les icônes alternatives.

7. Ajoutez des dictionnaires sous CFBundleAlternateIconsnommés comme noms d'icônes dans le AppIconsgroupe.

8. Pour chaque dictionnaire, ces deux propriétés UIPrerenderedIconet CFBundleIconFilesdoivent être configurées.

9. Définissez le type de UIPrerenderedIconet Stringsa valeur sur NO.

10. Définissez la chaîne typede CFBundleIconFiles to l'élément de tableau and set its first key,0` toavec la valeur du nom de l'icône.

11. définissez le nom de l'icône par défaut dans Primary Iconet Newsstand Icon-> Icon files-> Item 0.

‍ Côté JS

Après ces étapes, nous avons la possibilité de changer l'icône dans le code JS de notre application. Importons la bibliothèque :

import { changeIcon, getIcon } from 'react-native-change-icon';

changeIcon('iconname');        // pass the icon name to change the icon 

getIcon();                     // to get the currently active icon

Sortir

Veuillez consulter le projet de démonstration sur GitHub pour plus d'informations

J'espère que cet article vous a apporté de nouvelles connaissances aujourd'hui. Si vous l'avez trouvé agréable et utile, n'hésitez pas à me donner quelques applaudissements !

Bon codage :)