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?
icons
react-native
Adam Katz
la source
la source
Réponses:
Icônes iOS
AppIcon
enImages.xcassets
.29pt
29pt*2
29pt*3
40pt*2
40pt*3
57pt
57pt*2
60pt*2
60pt*3
.Images.xcassets
ressemblera à ceci:Icônes Android
ic_launcher.png
dans des dossiers[ProjectDirectory]/android/app/src/main/res/mipmap-*/
.ic_launcher.png
dansmipmap-hdpi
.ic_launcher.png
dansmipmap-mdpi
.ic_launcher.png
dansmipmap-xhdpi
.ic_launcher.png
enmipmap-xxhdpi
.ic_launcher.png
enmipmap-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.png
fichier également une version ronde appeléeic_launcher_round.png
avec la même taille.B. Supprimer les icônes rondes: à l' intérieur,
yourProjectFolder/android/app/src/main/AndroidManifest.xml
supprimez la ligneandroid:roundIcon="@mipmap/ic_launcher_round"
et enregistrez-la.Sinon, la génération génère une erreur.
la source
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-make
dans le projet react-nativePour 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: 🥳
la source
convert
commande existe.yarn -g add imagemagick
. Je l'ai ensuite installé en utilisant à lahomebrew
place (brew install imagemagick
) qui a installé tout ce qui était nécessaire et a fonctionné.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
la source
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}.xml
complètement vos fichiers.la source
Quelqu'un a créé un outil très facile à utiliser uniquement pour cette tâche: https://www.npmjs.com/package/app-icon
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.
la source
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:
la source
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.
la source
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
la source
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
la source
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
la source
Vous pouvez importer des éléments react-native et utiliser les icônes de police impressionnantes dans votre application native react
Installer
puis importez celui où vous souhaitez utiliser des icônes
Utilisez-le comme
la source
ios-american-football
? ou nous pouvons remplacer ios par android dans cette syntaxe?