Comment ajouter des icônes à l'application React Native

271

Je crée 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é cela, mais je continue de trouver différents types d'icônes qui se réfèrent à différentes choses. Comment ajouter ces types d'icônes à l'application?

Adam Katz
la source
Est-ce pour iOS, Android ou les deux?
rmevans9
3
maintenant pour ios mais finalement pour les deux
Adam Katz
Voir également cette réponse: stackoverflow.com/a/11845815/5576491
PallavBakshi

Réponses:

427

Icônes iOS

  • Mettre AppIconen Images.xcassets.
  • Ajoutez 9 icônes de tailles 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.pngdans des dossiers [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
    • 72 * 72 ic_launcher.pngdans mipmap-hdpi.
    • 48 * 48 ic_launcher.pngdans mipmap-mdpi.
    • 96 * 96 ic_launcher.pngdans mipmap-xhdpi.
    • 144 * 144 ic_launcher.pngen mipmap-xxhdpi.
    • 192 * 192 ic_launcher.pngen mipmap-xxxhdpi.

Mettre à jour 2019 Android

Les dernières versions de react native prennent également en charge l'icône ronde. Pour ce cas particulier, vous avez deux choix:

A. Ajouter des icônes rondes: dans chaque dossier mipmap, ajoutez en plus au ic_launcher.pngfichier également une version ronde appelée ic_launcher_round.pngavec la même taille.

B. Supprimer les icônes rondes: à l' intérieur, yourProjectFolder/android/app/src/main/AndroidManifest.xmlsupprimez la ligne android:roundIcon="@mipmap/ic_launcher_round"et enregistrez-la.

Sinon, la génération génère une erreur.

Rockvic
la source
2
@ adam-katz, cela devrait vraiment être la réponse acceptée.
Jason Wiener
2
Existe-t-il un moyen de faire pour les deux directement dans React-Native?
jose920405
2
Juste pour mettre à jour cette excellente réponse. Vous avez désormais également besoin de 83,5 pt * 2 pour l'iPadPro sur iOS.
Randy Coulman
4
J'ai écrit un générateur pour générer automatiquement des icônes pour votre application native de réaction à partir d'un seul fichier d'icônes :) J'espère que cela peut aider les autres! (Voir cette réponse )
Almouro
5
Où est-ce dans la documentation native React?
GONeale
296

J'ai écrit un générateur pour générer automatiquement des icônes pour votre application native React à partir d'un seul fichier d'icônes. Il génère vos actifs et les ajoute également correctement à votre projet ios et android:

Mise à jour (04/09/2019)

Nous avons réorganisé notre générateur pour être à jour avec les normes de l'écosystème. Vous pouvez maintenant utiliser @ bam.tech / react-native-make .

Vous pouvez l' installer en utilisant: yarn add @bam.tech/react-native-makedans le projet react-native

Pour l' utiliser react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>

Et c'est tout! J'espère que cela peut être utile pour les autres :)

Recommandations:

Voici quelques améliorations par rapport à l'outil précédent: 🥳

  • Pas de dépendance Yeoman, c'est maintenant un plugin react-native-cli
  • Aucune dépendance Magick Image
  • Crée des icônes adaptatives pour Android
  • Ajoute des tailles d'icônes manquantes pour iOS
Almouro
la source
7
Ce devrait être la réponse acceptée. Vous me faites gagner énormément de temps! En tant que développeurs d'applications, nous ne nous soucions vraiment pas du nombre d'icônes dont iOS et Android ont besoin, car 9 icônes et 4 icônes ont toutes le même contenu, peu importe? Pour la rétine ou non, pour grand ou petit écran, qui s'en soucie? Donnez-moi juste les icônes exactement claires et mêmes, c'est tout! Merci et j'aimerais essayer vos autres outils. :)
Zhang Buzz
4
J'ai trouvé le problème: lors de l'installation de l'image-magick, assurez-vous d'installer les outils hérités afin que la convertcommande existe.
Rick Love
2
@RickLove J'ai également eu ce problème après avoir installé imagemagick avec yarn -g add imagemagick. Je l'ai ensuite installé en utilisant à la homebrewplace ( brew install imagemagick) qui a installé tout ce qui était nécessaire et a fonctionné.
BeniaminoBaggins
1
@PolaEdward pas besoin de Ruby :) Toutes les exigences sont ici: github.com/bamlab/generator-rn-toolbox/blob/master/generators/…
Almouro
1
cela a beaucoup aidé, mais est-il possible d'ajouter des icônes rondes aussi? ces bibliothèques ajoutent simplement des icônes normales pour Android. merci encore
Amas
31

J'utiliserais un service pour redimensionner correctement l'icône. http://makeappicon.com/ semble bon. Utilisez une image sur la plus grande taille car la mise à l'échelle d'une image plus petite peut entraîner la pixellisation des plus grandes icônes. Ce site vous donnera des tailles pour iOS et Android.

De là, il suffit de définir l'icône comme vous le feriez pour une application native classique.

https://help.apple.com/xcode/mac/8.0/#/dev10510b1f7

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

rmevans9
la source
1
Le lien Apple est rompu, @ rmevans9. :(
Adam K Dean
1
Notez que ce service recueille des informations sur vous - telles que le nom de l'application, la catégorie de marché de l'application, etc. - et empêche le téléchargement d'images sauf si une adresse e-mail est fournie.
tfmontague
J'ai lu cette réponse, et seulement après un certain temps, j'ai lu la réponse d'Almouro ci-dessous. Je souhaite avoir commencé avec la réponse d'Almouro.
Yossi
23

J'ai pu ajouter une icône d'application à mon projet Android natif en suivant les conseils de ce type et en utilisant Android Asset Studio

La voici, transcrite en cas de coupure du lien:

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

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 que vous souhaitez vers votre /android/app/src/main/res/dossier. Assurez-vous de mettre chaque image dans le sous-dossier de droitemipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

android / app / src / main / res

3) Ne pas (comme je l'ai fait à l'origine) glisser-déposer naïvement tout le dossier sur votre dossier res. Comme vous supprimez peut-être /res/values/{strings,styles}.xmlcomplètement vos fichiers.

mixophrygien
la source
9

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

Cet outil simple vous permet de créer une seule icône dans votre projet natif réactif, puis de créer des icônes de toutes les tailles requises à partir de celui-ci. Il fonctionne actuellement pour iOS et Android.

Je l'ai utilisé. J'ai fait un png 512x512, puis j'ai exécuté cet outil et cette flèche, c'est fait. Super facile.

jcollum
la source
1
PS: react-native-icon est marqué comme obsolète et a été renommé app-icon; npmjs.com/package/app-icon
Eirik H
8

Arrivant un peu tard ici, mais Android Studio dispose d'un assistant d'actif d'icône très pratique. Son très explicite mais a quelques effets pratiques et son intégré dans:

entrez la description de l'image ici

Ryan Knell
la source
Construisez-vous vos projets rect-natifs dans Android Studio?
Adam Katz
1
Non, mais je dois régulièrement l'ouvrir pour une raison ou une autre. Même chose avec XCode - vous devez éventuellement passer de l'autre côté. C'est la méthode que j'utilise pour générer des jeux d'icônes de haute qualité en quelques secondes, très surpris qu'il ait eu une réponse si forte. Enfer - Je possède même mon propre projet open source pour générer des icônes pour les applications mobiles et je préfère toujours cette méthode. npmjs.com/package/cordova-media-generator
Ryan Knell
C'était génial - cela a également amélioré les icônes, ce que j'ai trouvé super utile (comme cette réponse!).
Bilal Akil
Brillant! Joli!
barrylachapelle
6

Vous aurez besoin d'icônes de différentes tailles pour iOS et Android, comme l'a dit Rockvic. De plus, je recommande ce site pour générer des icônes de tailles différentes 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 ça aide.

jakobinn
la source
-2

Je voudrais suggérer d'utiliser des icônes vectorielles réactives natives pour importer des icônes dans votre projet. Lorsque vous utilisez des icônes vectorielles, vous n'avez pas à vous soucier du côté de la mise à l'échelle des icônes. En utilisant le package, vous pouvez utiliser tous les jeux d'icônes populaires tels que fontawesome, ionicons etc.

En plus de ces jeux d'icônes, vous pouvez également apporter vos propres icônes à votre projet natif en emballant vos icônes sous forme de fichier ttf et vous pouvez importer ce ttf directement dans le projet Android et iOS. Vous pouvez utiliser la même bibliothèque d'icônes vectorielles native native pour gérer ces icônes

Voici une procédure détaillée pour configurer des icônes personnalisées

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

Manzoor Samad
la source
-5

Vous pouvez importer des éléments react-native et utiliser les icônes de police impressionnantes dans votre application native react

Installer

npm install --save react-native-elements

puis importez celui où vous souhaitez utiliser des icônes

import { Icon } from 'react-native-elements'

Utilisez-le comme

render() {
   return(
    <Icon
      reverse
      name='ios-american-football'
      type='ionicon'
      color='#517fa4'
    />
 );
}
uday
la source
Comment pouvons-nous ajouter des icônes pour Android, car nous spécifions le nom comme ios-american-football? ou nous pouvons remplacer ios par android dans cette syntaxe?
ganeshdeshmukh
Cela ne répond pas à la question d'origine.
SoluableNonagon
Le message concerne l'icône du lanceur et n'a rien à voir avec les éléments réactifs natifs. La bibliothèque est réservée aux icônes intégrées à l'application.
céleste