Comment append des icons à l’application React Native

Je fais une application React Native. Je souhaite personnaliser l’icône de l’application (c’est-à-dire l’icône sur laquelle vous cliquez pour démarrer l’application). J’ai googlé ceci, mais je continue à trouver différents types d’icons qui font référence à différentes choses. Comment append ces types d’icons à l’application?

Icônes iOS

  • Définissez AppIcon dans Images.xcassets .
  • Ajoutez 9 icons de taille différentes:
    • 29pt
    • 29pt*2
    • 29pt*3
    • 40pt*2
    • 40pt*3
    • 57pt
    • 57pt*2
    • 60pt*2
    • 60pt*3 .

Images.xcassets ressemblera à ceci:

Icônes Android

  • Mettez ic_launcher.png dans les dossiers [PrjDir]/android/app/src/main/res/mipmap-*/ .
    • 72 * 72 ic_launcher.png in mipmap-hdpi .
    • 48 * 48 ic_launcher.png in mipmap-mdpi .
    • 96 * 96 ic_launcher.png dans mipmap-xhdpi .
    • 144 * 144 ic_launcher.png dans mipmap-xxhdpi .
    • 192 * 192 ic_launcher.png in mipmap-xxxhdpi .

J’ai écrit un générateur pour générer automatiquement des icons pour votre application native à partir d’un fichier icône unique: https://blog.bam.tech/developper-news/how-to-generate-your-react-native-app-icons-in -a-ligne de commande unique .

Il génère vos actifs et les ajoute également correctement à vos projets ios et Android.

Installez-le

Vous avez besoin du node 6 installé et de image-magick .

Puis installez le générateur avec

 npm install -g yo generator-rn-toolbox 

Utilise le

Avoir un fichier icône unique à scope de main quelque part. 200x200px est suffisant.

Ensuite, dans votre projet React Native, lancez:

 yo rn-toolbox:assets --icon  # For instance yo rn-toolbox:assets --icon ../icon.png 

On vous demandera le nom de votre projet réactif. Par exemple, si vous avez créé votre projet avec react-native init MyAwesomeProject , le nom de votre projet est MyAwesomeProject .

Quand on vous demande, ? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json? , répondez avec Y.

Et c’est tout!

J’espère que cela peut être utile pour les autres 🙂

Je voudrais utiliser un service pour mettre à l’échelle l’icône correctement. http://makeappicon.com/ semble bon. Utilisez une image de plus grande taille car la mise à l’échelle d’une image plus petite peut entraîner la pixellisation des plus grandes icons. Ce site vous donnera des tailles pour iOS et Android.

De là, il suffit de définir l’icône comme vous le feriez avec une application native standard.

https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/chapters/AddingLaunchImagestoanAssetCatalog.html

Définir l’icône pour l’application Android

J’ai pu append une icône d’application à mon projet Android réactif en suivant les conseils de ce dernier et en utilisant Android Asset Studio.

La voici, transcrite au cas où le lien serait mort:

Comment télécharger une icône d’application dans Android React-Native

1) Téléchargez votre image sur Android Asset Studio . Choisissez les effets que vous souhaitez appliquer. L’outil génère un fichier zip pour vous. Cliquez sur Télécharger .Zip.

2) Décompressez le fichier sur votre machine. Faites ensuite glisser les images souhaitées dans votre dossier /android/app/src/main/res/ . Assurez-vous de placer chaque image dans le sous-dossier de droite mipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

android / app / src / main / res

3) Ne faites pas (comme je l’ai fait à l’origine) glisser et déposer naïvement tout le dossier sur votre dossier res. Comme vous pouvez supprimer vos fichiers /res/values/{ssortingngs,styles}.xml .

Quelqu’un a créé un outil très facile à utiliser pour cette tâche: https://www.npmjs.com/package/react-native-icon

Cet outil simple vous permet de créer une icône unique dans votre projet réactif, puis de créer des icons de toutes les tailles requirejses. Il fonctionne actuellement pour iOS et Android.

Je l’ai utilisé Fait un png 512×512 et a ensuite couru cet outil et boom, fait. Super facile

Vous aurez besoin d’icons de tailles différentes pour iOS et Android, comme l’a dit Rockvic. De plus, je recommande ce site pour générer des icons de différentes tailles si quelqu’un est intéressé. Vous n’avez pas besoin de télécharger quoi que ce soit et cela fonctionne parfaitement.

https://resizeappicon.com/

J’espère que cela aide.

Arrivant un peu tard, Android Studio dispose d’un assistant de gestion des icons très pratique. Son très explicite mais a quelques effets pratiques et son droit intégré dans:

entrer la description de l'image ici

Je voudrais suggérer d’utiliser des icons de réaction-native-vector pour importer des icons dans votre projet. Comme vous utilisez des icons vectorielles, vous n’avez pas à vous soucier du côté de la mise à l’échelle des icons. Lors de l’utilisation du package, vous pouvez utiliser tous les jeux d’icons les plus courants, tels que fontawesome, ionicons, etc.

Outre ces icons, vous pouvez également apporter vos propres icons à votre projet réactif en plaçant vos icons sous forme de fichier ttf et vous pouvez importer ce fichier directement dans les projets Android et iOS. Vous pouvez utiliser la même bibliothèque react-native-vector-icons pour gérer ces icons

Voici une procédure détaillée pour configurer des icons personnalisées

https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c