Hinzufügen eines Splash Screens zu einer React Native-App unter iOS und Android

Um eine React Native-App in den App Stores zu bringen, reicht es nicht aus, sie nur zu entwickeln. Vor der Überprüfung sind Icons, Beschreibungen sowie ein Splash Screen erforderlich, wobei der Splash Screen den Einsatz von nativem Code erfordert. Die unten aufgeführten Schritte beziehen sich auf iOS und Android in ihren jeweiligen Plattform-IDEs und beinhalten eine geringe Menge an nativem Code. Die Anleitungen stammen aus der Ära von react-native-splash-screen (Version 3.0.6 sowie react-native link), sodass neuere React Native-Versionen das Verknüpfen möglicherweise anders handhaben.

Projekte, die mit Expo oder Create React Native App erstellt wurden, benötigen all das nicht, da ihre eigene Dokumentation die Splash Screens in wenigen Zeilen erklärt.

Ein neues Projekt ist ein guter Ausgangspunkt – beispielsweise react-native init SplashExample. Bringen Sie es vor jeglichen Änderungen unter Versionskontrolle. So lassen sich Fehler leicht rückgängig machen und wird deutlich, welche Dateien vom Splash Screen betroffen sind.

Entwurf der Ressourcen

Ein älterer Ansatz nutzte ein großes Bild als Startbildschirm, das bei der zunehmenden Vielfalt an Bildschirmauflösungen schlecht skalierte. Ein besseres Konzept beginnt mit einem einfachen quadratischen Bild, das dem App-Icon ähnelt – aus zwei Gründen.

1. Es erweckt den Eindruck, dass das angeklickte Icon an Größe zunimmt und den gesamten Bildschirm ausfüllt, wodurch der Übergang kontinuierlich wirkt.
2. Es bleibt einfach. Ein Startbildschirm sollte nur für wenige Millisekunden sichtbar sein, daher sollte er keine Informationen enthalten. Schließlich handelt es sich um einen Ladebildschirm.

Exportieren Sie das Quadrat in drei Größen: 200 px für @1x, 400 px für @2x und 600 px für @3x.

Ein Hintergrund, der Blitze sichtbar macht

Falls Sie bereits einmal eine Splash-Screen-Funktion in React Native verwendet haben, haben Sie vermutlich einen weißen Blitz gesehen, bevor der Inhalt angezeigt wurde. Bei einer App mit weißem Hintergrund ist das schwer zu erkennen, aber es ist dennoch störend. Um sicherzustellen, dass kein solcher Blitz übersehen wird, geben Sie der Demo-App einen dunklen Hintergrund: Setzen Sie die Hintergrundfarbe auf #4F6D7A, die Textfarbe auf #F5FCFF und wechseln Sie die Statusleiste auf helle Schrift – all das in App.js.

iOS

Öffnen Sie das Projekt in Xcode:

open ios/SplashExample.xcodeproj

Zuerst fügen Sie ein Bildressourcen hinzu. Gehen Sie im linken Navigator zu SplashExample, dann wieder zu SplashExample, anschließend zu Images.xcassets und klicken Sie auf die Plus-Taste in der zweiten Navigator-Spalte. Benennen Sie die Ressource SplashIcon. Fügen Sie die drei Bilder ein – Xcode weist jedes automatisch der entsprechenden Pixeldichte zu.

Dann öffnen Sie LaunchScreen.xib im linken Navigator. Es enthält zwei Textelemente: den Projektnamen und „Powered by React Native“. Wählen Sie beide aus und löschen Sie sie.

Stellen Sie den Hintergrund der View ein. Wählen Sie im zweiten Navigator „View“ aus und wählen Sie anschließend „Background“ im rechten Panel, um den Farbwähler zu öffnen. Ein Tipp, der etwas Zeit braucht, um entdeckt zu werden: Wählen Sie die zweite Registerkarte im Wähler, dann „RGB Sliders“ – es erscheint ein Feld, in das ein Hex-Wert eingegeben werden kann. Geben Sie #4F6D7A ein.

Fügen Sie nun einen Image View hinzu. Öffnen Sie die Objektbibliothek (das dritte Icon unten rechts im Tools-Panel), suchen Sie nach „image“ und ziehen Sie den Image View auf das farbige View-Feld. Im ober rechten Attributenspanel wählen Sie SplashIcon als Bild aus. Stellen Sie den Inhaltmodus auf „Aspect Fit“ ein, der sich an zweiter Stelle von oben in diesem Panel befindet, damit die Proportionen erhalten bleiben.

Um das Icon auf jedem Gerät zentriert zu halten, öffnen Sie das Ruler-Tab (das fünfte Icon oben im rechten Panel). Im Autoresizing-Feld deaktivieren Sie die äußeren roten Linien und aktivieren Sie die inneren roten Pfeile. Das Bild bleibt unabhängig von der Bildschirmgröße zentriert.

Dadurch entsteht zwar ein Startbildschirm, doch das weiße Flackern ist weiterhin vorhanden.

Warum das Flackern auftritt

Wenn die App gestartet wird, zeigt iOS sofort den Startbildschirm an. Danach benötigt React Native Zeit zum Starten: Der JavaScript-Code wird geladen und die Brücke zwischen nativen und virtuellen Komponenten wird initialisiert. Während dieser Zeit ist der native Startbildschirm nicht mehr sichtbar und noch nichts wurde dargestellt, weshalb nur Weiß zu sehen ist. Die Lösung besteht darin, den Splash-Bildschirm etwas länger als standardmäßig anzuzeigen, bis JavaScript bereit ist. Das Paket react-native-splash-screen erledigt das.

Installieren und verknüpfen Sie es:

yarn add react-native-splash-screen@3.0.6
react-native link react-native-splash-screen

Konfigurieren Sie anschließend die native Seite. Öffnen Sie in Xcode AppDelegate.m, fügen Sie die Header-Importierung des Pakets SplashScreen.h zu den anderen Importen hinzu und rufen Sie [SplashScreen show]; direkt oberhalb von return YES; innerhalb von didFinishLaunchingWithOptions auf.

Auf der JavaScript-Seite geben Sie an, dass der Splashscreen verschwinden soll, sobald die App bereit ist. Rufen Sie die Versteckungsmethode des Pakets von componentDidMount in App.js auf.

Das Ergebnis sieht gut aus, es bleibt nur noch ein kleiner Punkt zu verbessern: die Farbe der Statusleiste, solange der Splashscreen angezeigt wird. Fügen Sie in Info.plist eine Zeile mit der Schlüsselwerte UIStatusBarStyle und dem Zeichensatzwert UIStatusBarStyleLightContent hinzu. Danach ist die iOS-Seite abgeschlossen.

Android

Android ist etwas komplizierter, da zwei separate Startbildschirme benötigt werden. Einer gehört zu react-native-splash-screen, der andere wird angezeigt, bevor die App ihre Ansichten lädt.

Assets

Kopieren Sie die Bilder in die mipmap-Ordner unter android/app/src/main/res. Android benennt seine Auflösungsgruppen anders als iOS, daher müssen die Dateien zugeordnet werden:

• mipmap-mdpi erhält das 1x-Bild.
• mipmap-hdpi erhält das 2x-Bild.
• mipmap-xhdpi erhält das 3x-Bild.
• mipmap-xxhdpi erhält ebenfalls das 3x-Bild.

Innerhalb jedes Ordners ändern Sie den Dateinamen in icon.png um.

Der Startbildschirm beim ersten Starten

Der erste Bildschirm wird angezeigt, wenn die App aus einem unbenutzten Zustand gestartet wird. Dieser Ansatz folgt einem bekannten Artikel von Big Nerd Ranch über die richtige Erstellung von Splash-Screens, der die Gründe detaillierter erläutert.

1. Erstellen Sie background_splash.xml in android/app/src/main/res/drawable. Wahrscheinlich müssen Sie zunächst den Ordner drawable anlegen. Die Datei definiert eine layer-list, also einen Stapel von Ebenen. Die erste Ebene füllt sich mit der Hintergrundfarbe (die gleich definiert wird) und die zweite Ebene zeigt das Icon an, das 200dp breit und hoch ist und in der Mitte angeordnet wird.
2. Erstellen Sie colors.xml in android/app/src/main/res/values und definieren Sie dort die blaue Farbe, dieselbe, die die App verwendet.

In styles.xml im selben Verzeichnis definieren Sie einen SplashTheme. Dabei wird background_splash als Fensterhintergrund und Blau für die Statusleiste verwendet, wodurch die echte App so genau wie möglich nachgeahmt wird – einschließlich der Anpassung der Statusleiste. Stellen Sie außerdem sicher, dass die Statusleistenfarbe des Standard-Themas korrekt eingestellt ist.

In AndroidManifest.xml lassen Sie die App zunächst SplashTheme verwenden. Innerhalb von <application> registrieren Sie eine neue SplashActivity als Startaktivität und passen Sie MainActivity so an, dass sie nicht mehr als Startpunkt dient. Achten Sie auf android:exported="true", welches auf neueren Android-Versionen an den erforderlichen Stellen gesetzt werden muss.

Erstellen Sie SplashActivity.java. Ihre einzige Aufgabe besteht darin, sofort auf MainActivity, die eigentliche React Native-App, weiterzuleiten.

Führen Sie die App aus, beenden Sie sie, damit beim nächsten Start ein Neustart erfolgt, und öffnen Sie sie erneut. Das Splash-Bild erscheint sofort, gefolgt vom gleichen weißen Blitz. Die Behebung erfordert etwas mehr Arbeit als bei iOS, aber nicht viel.

Das Splash-Bild bis zur Bereitstellung von JavaScript anzeigen

Falls es noch nicht installiert ist, fügen Sie das Paket hinzu und verknüpfen Sie es:

yarn add react-native-splash-screen@3.0.6
react-native link

Konfigurieren Sie die native Android-Seite, indem Sie den Initialisierungsaufruf des Pakets in MainActivity.java hinzufügen. In App.js stellen Sie sicher, dass das Startbild sofort geschlossen wird, sobald die App lädt, genauso wie auf iOS.

Erstellen Sie anschließend launch_screen.xml in android/app/src/main/res/layout. Der Name ist wichtig, denn die Bibliothek sucht danach. Verwenden Sie einen LinearLayout als Wurzelelement. Android Studio verfügt über einen visuellen Editor, der dem Interface Builder von Xcode ähnelt, doch das Direktbearbeiten des XMLs ist hier einfacher. Setzen Sie die Ausrichtung des Layouts auf „Center“ und seinen Hintergrund auf Blau, lassen Sie den Rest bei den Standardwerten. Fügen Sie darin einen ImageView hinzu, der das Icon anzeigt.

Die Eigenschaften des ImageView:

• android:layout_width und android:layout_height legen die Größe fest, die der Inhalt von background_splash.xml verwendet.

android:layout_marginTop entspricht der Höhe der Statusleiste. Wenn man diesen Wert weglässt, wird das Icon an einer leicht anderen Stelle angezeigt als auf dem ersten Startbildschirm, was zu einem sichtbaren Sprung führt, wenn man das eine durch das andere ersetzt.

android:src="@mipmap/icon" verweist auf das Bild.

Zum Schluss benötigt colors.xml noch einen Eintrag:

<color name="primary_dark">#4F6D7A</color>

Wenn man darauf verzichtet, stürzt die App beim Start ab. Der Grund liegt in einem Defekt innerhalb von react-native-splash-screen selbst, wodurch eine spätere Version diese Funktion möglicherweise überflüssig machen könnte.

Sobald beide Komponenten vorhanden sind, startet die App auf iOS und Android mit einem durchgehenden, flimmerfreien Splash-Screen.