So fügen Sie einer React Native-App einen Begrüßungsbildschirm in weniger als 10 Minuten hinzu (Android & React Native 0.50)

Dies ist eine Zusammenfassung von zwei Tutorials, die Sie sehen, wenn Sie auf Google "Nativen Begrüßungsbildschirm reagieren" eingeben. Diese beiden sind von @crazycodeboy und Spencer Carli.

Erstellen von Begrüßungsbildschirm-Assets

Wenn Sie einen Begrüßungsbildschirm in Ihrer App implementieren möchten, müssen Sie auf verschiedene Formen und Größen von Geräten vorbereitet sein. Glücklicherweise können Sie Image Gorilla von Ape Tools verwenden, um Ihre Begrüßungsbildschirm-Assets so zu generieren, dass sie für alle Geräte kompatibel sind. Sie müssen also unser Startbild auf Image Gorilla hochladen. Ich verwende ein PNG-Bild mit einer Auflösung von 1600 x 1600 wie im folgenden Beispiel:

Schritt für Schritt zum Image Gorilla:

  1. Klicken Sie im Bereich "Begrüßungsbildschirm hochladen" auf "Durchsuchen"
  2. Laden Sie Ihr Begrüßungsbild hoch
  3. Scrollen Sie bis zum Ende der Seite
  4. Klicken Sie auf "Kapow!"
  5. Klicken Sie auf "Download Zip"
  6. Extrahieren Sie die Datei ApeToolsGeneratedAssets.zip
  7. Warten Sie auf die weitere Aktion im Teil Hinzufügen von Begrüßungsbildschirmen

Erstellen Sie Ihre App

Sie müssen Ihr React Native-Projekt erstellen, um Ihre App zu generieren. In diesem Lernprogramm verwende ich den folgenden Befehl:

react-native init Splashscreen

Splashscreen ist der Projektname, den Sie in den Namen ändern können, den Sie verwenden möchten.

Öffnen Sie nach dem Erstellen Ihres React Native-Projekts Ihr Projekt in einem Texteditor. Der Texteditor, den ich in diesem Tutorial verwenden werde, ist Atom.

Installieren Sie das Paket react-native-splash-screen

In diesem Tutorial werde ich das reaction-native-splash-screen-Paket von crazycodeboy verwenden. Führen Sie diesen Befehl zunächst auf Ihrem Terminal aus, nachdem Sie das Projektverzeichnis von React Native mit cd Splashscreen geöffnet haben

npm ich reagiere-native-splash-screen - speichern

Vergessen Sie danach nicht, das Paket mit diesem Befehl mit Ihrem reaktiven nativen Projekt zu verknüpfen

React-Native-Link React-Native-Splash-Screen

Hinzufügen von Begrüßungsbildschirmen

Sie müssen den Ordner drawable in die zuletzt extrahierte Zip-Datei kopieren und einfügen, die in diesem Pfad unter ApeToolsGeneratedAssets / Android / res in Splashscreen / android / app / src / main / res abgelegt ist, und sicherstellen, dass Sie nur die folgenden Ordner kopieren:

  • ziehbar
  • ziehbar-hdpi
  • ziehbar-ldpi
  • drawable-mdpi
  • drawable-xhdpi
  • drawable-xxhdpi
  • drawable-xxxhdpi

Zeichnungsfähige Ressourcendatei erstellen

Erstellen Sie nun einen neuen Ordner in Splashscreen / android / app / src / main / res mit Namenslayout und fügen Sie in diesem Ordner eine neue XML-Datei mit dem Namen launch_screen hinzu

Fügen Sie in launch_screen.xml den folgenden Code ein

Stellen Sie sicher, dass Sie den korrekten Namen der PNG-Datei im Verzeichnis drawable in der Zeile @ drawable / screen eingeben. Ich benutze screen, weil mein png-Dateiname screen.png ist

drawable-xxx / screen.png und @ drawable / screen relation

Nachdem Sie mit der Datei launch_screen fertig sind, müssen Sie die Datei styles.xml in diesem Pfad ändern. Splashscreen / android / app / res / values, um einen neuen Stil hinzuzufügen. Daraus ergibt sich die folgende Datei.

Vergewissern Sie sich erneut, dass @ drawable / screen mit dem Namen Ihrer PNG-Datei verknüpft ist. In diesem Tutorial heißt dieser Name screen.png

Fügen Sie SplashActivity in AndroidManifest.xml hinzu

Sie müssen AndroidManifest.xml mit der neuen Aktivität "SplashActivity" aktualisieren, die beim erstmaligen Öffnen der App vor "MainActivity", die Ihre tatsächliche Anwendung darstellt, aktiviert wird. Die Ergebnisse in der Datei (Zeile 19–32) sehen so aus

Sie müssen SplashActivity anweisen, zu der MainActivity zu wechseln, die Ihre tatsächliche Anwendung darstellt. Dazu müssen Sie auf diesem Pfad eine neue Java-Klasse namens SplashActivity erstellen. Splashscreen / android / app / src / main / java / com / splashscreen und den folgenden Code in diese Datei einfügen. Stellen Sie sicher, dass die erste Zeile mit der ersten Zeile in MainActivity.java übereinstimmt.

Befehl hinzufügen, um SplasScreen auszublenden, sobald es bereits angezeigt wird

Um den Begrüßungsbildschirm nach dem Auftauchen auszublenden, müssen Sie diese Codezeilen (Zeile 3–6) wie in dieser Datei in Ihre App.js-Datei einfügen

So wird der Begrüßungsbildschirm aktiviert

Nachdem Sie den vorherigen Abschnitten Schritt für Schritt gefolgt sind, können Sie den Begrüßungsbildschirm mit diesem Befehl auf Ihrem Terminal in Ihrem React Native-Projektverzeichnis anzeigen

Reagieren-native Run-Android

Wenn der Begrüßungsbildschirm nicht angezeigt wird, können Sie die App schließen und über das Menü "Apps" öffnen.

Führen Sie den Befehl in Ihrem reaktiven nativen Projektverzeichnis ausMenü für meine Smartphone-AppsBeispiel für einen Begrüßungsbildschirm

Zusammenfassung

Dieses Tutorial ist wieder eine Zusammenfassung von zwei Tutorials, die ich zuvor gelesen und kombiniert habe, um Splash-Screen-Funktionen in meinem letzten Projekt mit React Native zu implementieren. Also, spezielle Credits an @crazycodeboy und Spencer Carli. Vielen Dank für Ihre Zeit und viel Spaß mit Ihrer App.

Referenz

Dieses Tutorial Github Link

@ Crazycodeboy Tutorial Link

Spencer Carli Hinzufügen eines Begrüßungsbildschirms zu einem mittleren Link einer reaktiven nativen App (iOS und Android)