it-swarm.com.de

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

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 das gegoogelt, aber ich finde immer wieder verschiedene Arten von Icons, die sich auf verschiedene Dinge beziehen. Wie füge ich diese Arten von Symbolen zur App hinzu?

199
Adam Katz

iOS Icons

  • Stellen Sie AppIcon in Images.xcassets ein.
  • Fügen Sie 9 verschiedene Größen-Icons hinzu:
    • 29pt
    • 29pt*2
    • 29pt*3
    • 40pt*2
    • 40pt*3
    • 57pt
    • 57pt*2
    • 60pt*2
    • 60pt*3.

Images.xcassets wird so aussehen:

 

Android-Symbole

  • Fügen Sie ic_launcher.png in Ordner [ProjectDirectory]/Android/app/src/main/res/mipmap-*/__________ ein.
    • 72 * 72 ic_launcher.png in mipmap-hdpi.
    • 48 * 48 ic_launcher.png in mipmap-mdpi.
    • 96 * 96 ic_launcher.png in mipmap-xhdpi.
    • 144 * 144 ic_launcher.png in mipmap-xxhdpi.
    • 192 * 192 ic_launcher.png in mipmap-xxxhdpi.
358
Rockvic

Ich habe einen Generator geschrieben, der automatisch Symbole für Ihre reagierende native App aus einer einzigen Symboldatei generiert: https://blog.bam.tech/developper-news/how-to-generate-your-react-native-app-ic-ons -in-a-Einzel-Befehlszeile .

Es generiert Ihre Assets und fügt sie Ihrem ios- und Android-Projekt korrekt hinzu.

Es installieren

Sie benötigen node 6 installiert und image-magick.

Dann installieren Sie den Generator mit

npm install -g yo generator-rn-toolbox

Benutze es

Halten Sie irgendwo eine einzige Symboldatei bereit. Das Symbol muss eine Größe von 1024x1024 haben.

Führen Sie dann in Ihrem React Native-Projekt Folgendes aus:

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

Sie werden nach dem Namen Ihres reaktiven Projekts gefragt. Wenn Sie beispielsweise Ihr Projekt mit react-native init MyAwesomeProject erstellt haben, lautet Ihr Projektname MyAwesomeProject.

Wenn Sie gefragt werden, ? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json?, antworten Sie mit Y.

Und das ist es!

Hoffe, es kann für andere nützlich sein :)

240
Almouro

Ich würde einen Dienst verwenden, um das Symbol richtig zu skalieren. http://makeappicon.com/ scheint gut zu sein. Verwenden Sie ein Bild mit einer größeren Größe, da die Vergrößerung eines kleineren Bildes dazu führen kann, dass die größeren Symbole pixeliert werden. Diese Site gibt Ihnen Größen für iOS und Android.

Von dort aus ist es nur eine Frage des Symbols wie bei einer normalen nativen App.

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

Symbol für Android-Anwendung setzen

27
rmevans9

Ich konnte ein App-Symbol zu meinem reaktionsnahen Android-Projekt hinzufügen, indem Sie den Rat dieses Typen befolgen und verwenden Android Asset Studio

Hier wird es transkribiert, falls der Link nicht mehr funktioniert:

Wie man ein Anwendungssymbol in React-Native Android hochlädt

1) Laden Sie Ihr Bild auf Android Asset Studio . 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 sich jedes Bild im rechten Unterordner mipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}. befindet.

 Android/app/src/main/res

3) Ziehen Sie nicht (wie ich es ursprünglich getan habe) den ganzen Ordner über Ihren res-Ordner. Möglicherweise entfernen Sie Ihre /res/values/{strings,styles}.xml-Dateien vollständig.

20
mixophrygian

Jemand hat ein sehr benutzerfreundliches Tool für diese Aufgabe entwickelt: https://www.npmjs.com/package/app-icon

Mit diesem einfachen Werkzeug können Sie ein einzelnes Symbol in Ihrem reaktionsvorbereitenden Projekt erstellen und anschließend Symbole aller erforderlichen Größen erstellen. Es funktioniert derzeit für iOS und Android.

Ich habe es benutzt. Machte einen 512x512 png und lief dann das Werkzeug und den Boom, fertig. Super einfach. 

9
jcollum

Für iOS und Android werden unterschiedlich große Symbole benötigt, wie Rockvic sagte. Außerdem empfehle ich diese Site, um Icons mit unterschiedlichen Größen zu generieren, wenn jemand interessiert ist. Sie müssen nichts herunterladen und es funktioniert perfekt.

https://resizeappicon.com/

Ich hoffe es hilft.

5
jakobinn

Es kommt etwas spät, aber Android Studio verfügt über einen sehr praktischen Symbolassistenten. Es ist sehr selbsterklärend, hat aber einige praktische Effekte und ist direkt eingebaut:

 enter image description here

4
Ryan Knell

Dies ist hilfreich für Leute, die Schwierigkeiten haben, eine bessere Seite zu finden, um Icons und einen Splashscreen zu generieren

1
ishab acharya

Wenn Sie expo verwenden, platzieren Sie einfach eine 1024 x 1024 png-Datei in Ihrem Projekt und Fügen Sie Ihrer app.json eine icon -Eigenschaft hinzu.

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

0
Ramon Schmitt

Sie können reaktiöse Elemente importieren und die font-awesome-Symbole für Ihre reagierende native App verwenden

Installieren 

npm install --save react-native-elements

dann importieren Sie das, wo Sie Symbole verwenden möchten

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

Verwenden Sie es gerne

render() {
   return(
    <Icon
      reverse
      name='ios-american-football'
      type='ionicon'
      color='#517fa4'
    />
 );
}
0
uday

Ich möchte vorschlagen, reaktative Vektor-Icons zu verwenden, um Icons in Ihr Projekt zu importieren. Wenn Sie Vektorsymbole verwenden, müssen Sie sich nicht um die Skalierungsseite von Symbolen kümmern. Während der Verwendung des Pakets können Sie alle gängigen Symbolsätze wie fontawesome, ionicons usw. verwenden.

Neben diesen Iconsets können Sie auch Ihre eigenen Icons zu Ihrem reaktionsinternen Projekt hinzufügen, indem Sie diese als ttf-Datei packen und dieses ttf direkt in Android- und ios-Projekte importieren. Sie können dieselbe Bibliothek mit reaktiven Vektor-Symbolen verwenden, um diese Symbole zu verwalten

Im Folgenden finden Sie eine detaillierte Anleitung zum Einrichten benutzerdefinierter Symbole

https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c

0
Manzoor Samad