So fügen Sie der React Native-App Symbole hinzu

271

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?

Adam Katz
quelle
Ist das für iOS, Android oder beides?
rmevans9
3
jetzt für ios, aber schließlich für beide
Adam Katz
Siehe auch diese Antwort: stackoverflow.com/a/11845815/5576491
PallavBakshi

Antworten:

427

iOS-Symbole

  • Setzen Sie AppIconein Images.xcassets.
  • Fügen Sie 9 Symbole unterschiedlicher Größe hinzu:
    • 29pt
    • 29pt*2
    • 29pt*3
    • 40pt*2
    • 40pt*3
    • 57pt
    • 57pt*2
    • 60pt*2
    • 60pt*3.

Images.xcassets wird so aussehen:

Android-Symbole

  • Legen Sie ic_launcher.pngin Ordnern [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
    • 72 * 72 ic_launcher.pngin mipmap-hdpi.
    • 48 * 48 ic_launcher.pngin mipmap-mdpi.
    • 96 * 96 ic_launcher.pngin mipmap-xhdpi.
    • 144 * 144 ic_launcher.pngin mipmap-xxhdpi.
    • 192 * 192 ic_launcher.pngin mipmap-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.pngDatei eine runde Version ic_launcher_round.pngmit derselben Größe hinzu.

B. Entfernen Sie runde Symbole:yourProjectFolder/android/app/src/main/AndroidManifest.xml Entfernen Sie im Inneren die Linie android:roundIcon="@mipmap/ic_launcher_round"und speichern Sie sie.

Andernfalls löst der Build einen Fehler aus.

Rockvic
quelle
2
@ Adam-Katz, das sollte wirklich die akzeptierte Antwort sein.
Jason Wiener
2
Gibt es eine Möglichkeit, für beide direkt in React-Native zu machen?
Jose920405
2
Nur um diese großartige Antwort zu aktualisieren. Sie benötigen jetzt auch 83.5pt * 2 für das iPadPro unter iOS.
Randy Coulman
4
Ich habe einen Generator geschrieben, um automatisch Symbole für Ihre reaktionsfähige native App aus einer einzelnen Symboldatei zu generieren :) Ich hoffe, er kann anderen helfen! (Siehe diese Antwort )
Almouro
5
Wo steht das in der reaktionsnativen Dokumentation?
GONeale
296

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-makeim reaktionsnativen Projekt

Um 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: 🥳

  • Keine Yeoman-Abhängigkeit, es ist jetzt ein React-Native-Cli-Plugin
  • Keine Image Magick-Abhängigkeit
  • Erstellt adaptive Symbole für Android
  • Fügt fehlende Symbolgrößen für iOS hinzu
Almouro
quelle
7
Dies sollte die akzeptierte Antwort sein. Sie sparen mir viel Zeit! Als App-Entwickler ist es uns wirklich egal, wie viele Symbole iOS und Android benötigen. 9 Symbole und 4 Symbole haben alle den gleichen Inhalt. Wen interessiert das? Für die Netzhaut oder nicht für die Netzhaut, für große oder kleine Bildschirme, wen interessiert das? Gib mir einfach die genau klaren und gleichen Symbole, das war's! Vielen Dank und ich würde gerne Ihre anderen Tools ausprobieren. :)
Zhang Buzz
4
Ich habe das Problem gefunden: Stellen Sie bei der Installation von image-magick sicher, dass Sie ältere Tools installieren, damit der convertBefehl vorhanden ist.
Rick Love
2
@ RickLove Ich hatte auch dieses Problem nach der Installation von imagemagick mit yarn -g add imagemagick. Ich habe es dann homebrewstattdessen installiert ( brew install imagemagick), wodurch alles Notwendige installiert und funktioniert hat.
BeniaminoBaggins
1
@PolaEdward keine Notwendigkeit für Ruby :) Alle Anforderungen sind hier: github.com/bamlab/generator-rn-toolbox/blob/master/generators/…
Almouro
1
es hat sehr geholfen, aber gibt es trotzdem runde Symbole? Diese Bibliothek fügt nur normale Symbole für Android hinzu. Nochmals vielen Dank
Amas
31

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

rmevans9
quelle
1
Apple Link ist defekt, @ rmevans9. :(
Adam K Dean
1
Beachten Sie, dass dieser Dienst Informationen über Sie sammelt, z. B. den Namen der App, die Marktkategorie der App usw., und das Herunterladen von Bildern verhindert, sofern keine E-Mail-Adresse angegeben wird.
Montag,
Ich habe diese Antwort gelesen und erst nach einiger Zeit die Antwort von Almouro unten gelesen. Ich wünschte, ich hätte mit Almouros Antwort begonnen.
Yossi
23

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

android / app / src / main / res

3) Ziehen Sie den gesamten Ordner nicht (wie ursprünglich) naiv über Ihren res-Ordner. Da Sie möglicherweise Ihre /res/values/{strings,styles}.xmlDateien insgesamt entfernen .

Mixophrygian
quelle
9

Jemand hat ein sehr einfach zu verwendendes Tool nur für diese Aufgabe erstellt: https://www.npmjs.com/package/app-icon

Mit diesem einfachen Tool können Sie ein einzelnes Symbol in Ihrem reaktionsnativen Projekt erstellen und daraus dann Symbole in allen erforderlichen Größen erstellen. Es funktioniert derzeit für iOS und Android.

Ich habe es benutzt. Erstellte ein 512x512 PNG und ließ dann das Werkzeug und den Ausleger fertig laufen. Super einfach.

jcollum
quelle
1
PS: React-Native-Icon ist als veraltet markiert und wurde in App-Icon umbenannt. npmjs.com/package/app-icon
Eirik H
8

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:

Geben Sie hier die Bildbeschreibung ein

Ryan Knell
quelle
Erstellen Sie Ihre direkt nativen Projekte in Android Studio?
Adam Katz
1
Nein, aber ich muss es regelmäßig aus irgendeinem Grund öffnen. Gleiches gilt für XCode - eventuell müssen Sie auf die andere Seite wechseln. Dies ist die Methode, mit der ich in Sekundenschnelle hochwertige Symbolsätze generiere. Sehr überrascht, dass sie eine so starke Resonanz hat. Hölle - Ich besitze sogar mein eigenes Open Source-Projekt, um Symbole für mobile Apps zu generieren, und ich bevorzuge diese Methode immer noch. npmjs.com/package/cordova-media-generator
Ryan Knell
Das war großartig - es hat auch die Symbole verschönert, was ich sehr hilfreich fand (wie diese Antwort!).
Bilal Akil
Brillant! Schön!
Barrylachapelle
6

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.

Jakobinn
quelle
3

Dies ist hilfreich für Personen, die Schwierigkeiten haben, eine bessere Website zum Generieren von Symbolen und Begrüßungsbildschirmen zu finden

ishab acharya
quelle
-2

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

Manzoor Samad
quelle
-5

Sie können React-Native-Elemente importieren und die Font-Awesome-Symbole für Ihre React-Native-App verwenden

Installieren

npm install --save react-native-elements

Importieren Sie dann das Symbol, in das Sie Symbole verwenden möchten

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

Verwenden Sie es wie

render() {
   return(
    <Icon
      reverse
      name='ios-american-football'
      type='ionicon'
      color='#517fa4'
    />
 );
}
uday
quelle
Wie können wir Symbole für Android hinzufügen, da wir den Namen als angeben ios-american-football? oder können wir ios durch android in dieser syntax ersetzen?
Ganeshdeshmukh
Dies geht nicht auf die ursprüngliche Frage ein.
SoluableNonagon
Der Beitrag handelt vom Launcher-Symbol und hat nichts mit reaktionsnativen Elementen zu tun. Die Bibliothek ist nur für In-App-Symbole.
Himmlischer