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?

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.

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:

• 1024x1024 Basisbild
• Kein transparenter Hintergrund für iOS
• Ein Symbol, das den Richtlinien für adaptive Symbole für Android folgt

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

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

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}.xmlDateien insgesamt entfernen .

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.

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:

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.

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

• App-Symbol erstellen (nützlich für Android und iOS)
• APE-Tools (nützlich für Android und iOS)
• Icon Set Creator (nur für iOS nützlich)
• Andoid Asset Studio (nur für Android nützlich + 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 Symboleigenschaft hinzu, dh "icon": "./src/assets/icon.png"

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

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

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