web-dev-qa-db-fra.com

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

Je fais une application React Native. J'aimerais personnaliser l'icône de l'application (c'est-à-dire l'icône sur laquelle vous cliquez pour démarrer l'application). J'ai cherché cela sur Google, mais je continue à trouver différents types d'icônes qui font référence à différentes choses. Comment puis-je ajouter ces types d'icônes à l'application?

iconsreact-native
199
Adam Katz

icônes iOS

  • Définissez AppIcon dans 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.png dans les dossiers [ProjectDirectory]/Android/app/src/main/res/mipmap-*/.
    • 72 * 72 ic_launcher.png dans mipmap-hdpi.
    • 48 * 48 ic_launcher.png dans mipmap-mdpi.
    • 96 * 96 ic_launcher.png dans mipmap-xhdpi.
    • 144 * 144 ic_launcher.png dans mipmap-xxhdpi.
    • 192 * 192 ic_launcher.png dans mipmap-xxxhdpi.
358
Rockvic

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

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

Installez-le

Vous devez installer node 6 et image-magick.

Puis installez le générateur avec

npm install -g yo generator-rn-toolbox

Utilise le

Avoir un seul fichier d'icône à portée de main quelque part. L'icône doit avoir une taille de 1024x1024.

Ensuite, dans votre projet React Native, exécutez:

yo rn-toolbox:assets --icon <path to your icon>
# For instance
yo rn-toolbox:assets --icon ../icon.png

Le nom de votre projet natif de réaction vous sera demandé. Par exemple, si vous avez créé votre projet avec react-native init MyAwesomeProject, votre nom de projet est MyAwesomeProject.

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

Et c'est tout!

J'espère que ça peut être utile pour les autres :)

240
Almouro

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

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

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

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

27
rmevans9

J'ai pu ajouter une icône d'application à mon projet Android réactif en suivant le conseil de ce type et en utilisant Android Asset Studio

Le voici, transcrit au cas où le lien disparaîtrait:

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 ordinateur. Ensuite, faites glisser sur les images que vous voulez dans votre dossier /Android/app/src/main/res/. Assurez-vous de mettre chaque image dans le bon sous-dossier mipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

 Android/app/src/main/res

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

20
mixophrygian

Quelqu'un a créé un outil très facile à utiliser 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 rea-native, puis de créer des icônes de toutes les tailles requises. Cela fonctionne actuellement pour iOS et Android.

Je l'ai utilisé. Fabriqué un png 512x512 puis exécuté cet outil et boum, fait. Super facile. 

9
jcollum

Vous aurez besoin d'icônes de tailles différentes 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 cela vous intéresse. 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.

5
jakobinn

Nous arrivons un peu en retard ici, mais Android Studio dispose d’un assistant d’utilisation des ressources très pratique. Il est très explicite, mais a quelques effets utiles et est intégré dans:

 enter image description here

4
Ryan Knell

Ceci est utile pour les personnes qui ont du mal à trouver le meilleur site pour générer des icônes et splashscreen

1
ishab acharya

Si vous utilisez expo, placez simplement un fichier png 1024 x 1024 dans votre projet et ajoutez Une propriété icon à votre app.json, à savoir "icon": "./src/assets/icon.png"

https://docs.expo.io/versions/latest/guides/app-icons

0
Ramon Schmitt

Vous pouvez importer des éléments natifs de réaction et utiliser les icônes font-awesome dans votre application native de réaction

Installer 

npm install --save react-native-elements

puis importer ce que vous voulez 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'
    />
 );
}
0
uday

J'aimerais suggérer d'utiliser les icônes vectorielles-réactif-natif pour importer des icônes dans votre projet. Lorsque vous utilisez des icônes vectorielles, vous n'avez pas à vous inquiéter beaucoup du côté de la mise à l'échelle des icônes. Tout en utilisant le paquet, vous pouvez utiliser tous les jeux d'icônes populaires tels que fontawesome, ionicons, etc.

Outre ces jeux d'icônes, vous pouvez également apporter vos propres icônes à votre projet réagissant en stockant vos icônes dans un fichier ttf et vous pouvez importer ce fichier ttf directement dans les projets Android et iOS. Vous pouvez utiliser la même bibliothèque d'icônes de vecteur de réaction-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

0
Manzoor Samad