Ich mache eine React Native App. Ich möchte das App-Symbol anpassen (dh das Symbol, auf das Sie klicken, um die App zu starten). Ich habe dies gegoogelt, finde aber immer wieder verschiedene Arten von Symbolen, die sich auf verschiedene Dinge beziehen. Wie füge ich diese Art von Symbolen zur App hinzu?
icons
react-native
Adam Katz
quelle
quelle
Antworten:
iOS-Symbole
AppIcon
einImages.xcassets
.29pt
29pt*2
29pt*3
40pt*2
40pt*3
57pt
57pt*2
60pt*2
60pt*3
.Images.xcassets
wird so aussehen:Android-Symbole
ic_launcher.png
in Ordnern[ProjectDirectory]/android/app/src/main/res/mipmap-*/
.ic_launcher.png
inmipmap-hdpi
.ic_launcher.png
inmipmap-mdpi
.ic_launcher.png
inmipmap-xhdpi
.ic_launcher.png
inmipmap-xxhdpi
.ic_launcher.png
inmipmap-xxxhdpi
.Update 2019 Android
Die neuesten Versionen von react native unterstützen auch runde Symbole. Für diesen speziellen Fall haben Sie zwei Möglichkeiten:
A. Runde Symbole hinzufügen : Fügen Sie in jedem Mipmap-Ordner zusätzlich zur
ic_launcher.png
Datei eine runde Versionic_launcher_round.png
mit derselben Größe hinzu.B. Entfernen Sie runde Symbole:
yourProjectFolder/android/app/src/main/AndroidManifest.xml
Entfernen Sie im Inneren die Linieandroid:roundIcon="@mipmap/ic_launcher_round"
und speichern Sie sie.Andernfalls löst der Build einen Fehler aus.
quelle
Ich habe einen Generator geschrieben, um aus einer einzigen Symboldatei automatisch Symbole für Ihre reaktionsfähige native App zu generieren . Es generiert Ihre Assets und fügt sie Ihrem iOS- und Android-Projekt korrekt hinzu:
Update (04/09/2019)
Wir haben unseren Generator überarbeitet, um mit den Ökosystemstandards auf dem neuesten Stand zu sein. Sie können jetzt @ bam.tech / react-native-make verwenden .
Sie können es installieren mit:
yarn add @bam.tech/react-native-make
im reaktionsnativen ProjektUm es zu benutzen
react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>
Und das ist es! Hoffe es kann für andere nützlich sein :)
Empfehlungen:
Hier sind einige Verbesserungen gegenüber dem vorherigen Tool: 🥳
quelle
convert
Befehl vorhanden ist.yarn -g add imagemagick
. Ich habe es dannhomebrew
stattdessen installiert (brew install imagemagick
), wodurch alles Notwendige installiert und funktioniert hat.Ich würde einen Dienst verwenden, um das Symbol richtig zu skalieren. http://makeappicon.com/ scheint gut zu sein. Verwenden Sie ein größeres Bild, da das Vergrößern eines kleineren Bilds dazu führen kann, dass die größeren Symbole pixelig werden. Auf dieser Website erhalten Sie Größen für iOS und Android.
Von dort aus müssen Sie das Symbol nur noch wie eine normale native App einstellen.
https://help.apple.com/xcode/mac/8.0/#/dev10510b1f7
Symbol für Android-Anwendung festlegen
quelle
Ich konnte meinem reaktionsnativen Android-Projekt ein App-Symbol hinzufügen, indem ich den Ratschlägen dieses Typen folgte und Android Asset Studio verwendete
Hier ist es, transkribiert für den Fall, dass der Link tot ist:
So laden Sie ein Anwendungssymbol in React-Native Android hoch
1) Laden Sie Ihr Bild auf Android Asset Studio hoch . Wählen Sie die Effekte aus, die Sie anwenden möchten. Das Tool generiert eine Zip-Datei für Sie. Klicken Sie auf Download .Zip.
2) Entpacken Sie die Datei auf Ihrem Computer. Ziehen Sie dann die gewünschten Bilder in Ihren
/android/app/src/main/res/
Ordner. Stellen Sie sicher, dass jedes Bild im richtigen Unterordner abgelegt istmipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.
3) Ziehen Sie den gesamten Ordner nicht (wie ursprünglich) naiv über Ihren res-Ordner. Da Sie möglicherweise Ihre
/res/values/{strings,styles}.xml
Dateien insgesamt entfernen .quelle
Jemand hat ein sehr einfach zu verwendendes Tool nur für diese Aufgabe erstellt: https://www.npmjs.com/package/app-icon
Ich habe es benutzt. Erstellte ein 512x512 PNG und ließ dann das Werkzeug und den Ausleger fertig laufen. Super einfach.
quelle
Kommt etwas spät hierher, aber Android Studio hat einen sehr praktischen Assistenten für Symbol-Assets. Es ist sehr selbsterklärend, hat aber einige praktische Effekte und ist direkt eingebaut:
quelle
Sie benötigen unterschiedlich große Symbole für iOS und Android, wie Rockvic sagte. Außerdem empfehle ich diese Seite zum Generieren von Symbolen unterschiedlicher Größe, wenn jemand interessiert ist. Sie müssen nichts herunterladen und es funktioniert perfekt.
https://resizeappicon.com/
Ich hoffe es hilft.
quelle
Dies ist hilfreich für Personen, die Schwierigkeiten haben, eine bessere Website zum Generieren von Symbolen und Begrüßungsbildschirmen zu finden
quelle
Wenn Sie expo verwenden, platzieren Sie einfach eine 1024 x 1024 PNG-Datei in Ihrem Projekt und fügen Sie Ihrer app.json eine Symboleigenschaft hinzu, dh "icon": "./src/assets/icon.png"
https://docs.expo.io/versions/latest/guides/app-icons
quelle
Ich möchte vorschlagen, React-Native-Vector-Icons zu verwenden, um Icons in Ihr Projekt zu importieren. Wenn Sie Vektorsymbole verwenden, müssen Sie sich auf der Seite der Symbolskalierung keine großen Sorgen machen. Während Sie das Paket verwenden, können Sie alle gängigen Icon-Sets wie Fontawesome, Ionicons usw. verwenden.
Neben diesen Iconsets können Sie auch Ihre eigenen Icons in Ihr reaktionsnatives Projekt einfügen, indem Sie Ihre Icons als ttf-Datei packen und dieses ttf direkt in das Android- und das iOS-Projekt importieren. Sie können dieselbe Bibliothek mit reaktionsnativen Vektor-Symbolen verwenden, um diese Symbole zu verwalten
Hier finden Sie eine detaillierte Anleitung zum Einrichten benutzerdefinierter Symbole
https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c
quelle
Sie können React-Native-Elemente importieren und die Font-Awesome-Symbole für Ihre React-Native-App verwenden
Installieren
Importieren Sie dann das Symbol, in das Sie Symbole verwenden möchten
Verwenden Sie es wie
quelle
ios-american-football
? oder können wir ios durch android in dieser syntax ersetzen?