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

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 :)

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

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.

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.

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. 

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.

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:

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

• Make App Icon (nützlich für Android und iOS)
• APE-Tools (nützlich für Android und iOS)
• Icon Set Creator (nur nützlich für iOS)
• Andoid Asset Studio (nützlich nur für Android + empfohlen *)

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

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

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