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?

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.

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:

• 1024x1024 image de base
• Pas de fond transparent pour iOS
• Une icône qui suit les directives des icônes adaptatives pour Android

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

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

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}.

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.

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.

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:

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.

Ceci est utile pour les personnes qui ont du mal à trouver un meilleur site pour générer des icônes et un écran de démarrage

• Créer une icône d'application (utile pour Android et iOS)
• Outils APE (utiles pour Android et iOS)
• Créateur d'icônes (utile uniquement pour iOS)
• Andoid Asset Studio (utile pour Android uniquement + recommandé *)

Si vous utilisez expo, placez simplement un fichier png 1024 x 1024 dans votre projet et ajoutez une propriété icon à votre app.json, c'est-à-dire "icon": "./src/assets/icon.png"

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

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

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'
    />
 );
}