Wie man einen Splash Screen in React Native erstellt (Mit Code-Beispielen)

Der erste Eindruck ist bei mobilen Apps entscheidend. Wenn ein Nutzer Ihre React Native App startet, ist ein Splash Screen das Erste, was er sieht. Ein Splash Screen zeigt Ihr App-Logo oder Ihre Marke, während die App initialisiert wird, und verleiht Ihrer App ein professionelleres Gefühl, indem ein leerer Bildschirm vermieden und den Nutzern signalisiert wird, dass die App lädt.

Was ist ein Splash Screen in React Native?

Ein Splash Screen ist der erste Bildschirm, der beim Start Ihrer App erscheint. In React Native zeigt der Splash Screen typischerweise den Namen, das Logo oder andere Markenelemente Ihrer App auf einem schlichten Hintergrund. Er bleibt sichtbar, während der native Code lädt und die React Native App vorbereitet. Die Hauptzwecke eines Splash Screens sind:

• Branding: Er macht Ihre App-Marke sofort sichtbar
• Benutzererfahrung: Er verhindert, dass der Nutzer während des App-Starts einen leeren oder nicht reagierenden Bildschirm sieht
• Wahrnehmung von Geschwindigkeit: Ein Splash Screen vermittelt den Eindruck, dass etwas passiert, wodurch die Ladezeit kürzer erscheint

Warum einen Splash Screen in React Native für iOS verwenden?

Alle mobilen Apps können von Splash Screens profitieren, aber bei iOS sind sie besonders wichtig. Tatsächlich verlangt Apple, dass Apps einen Startbildschirm haben – bei iOS ist der Splash Screen nicht nur zur Schau; er ist Teil der erwarteten Benutzererfahrung. Hier sind die wichtigsten Gründe:

• Verbesserte Benutzererfahrung: iOS-Apps, die mit einem gut gestalteten Splash Screen starten, wirken reibungsloser und professioneller
• App-Branding: Der Splash Screen präsentiert das Logo, den Slogan oder die Grafik Ihrer App
• Verwaltung von Ladezeiten: iOS zeigt den Startbildschirm an, bis die App bereit ist, und maskiert so Verzögerungen beim Start

Einrichten eines Splash Screens in React Native (iOS-spezifisch)

Schritt 1: Ein Splash Screen-Bild erstellen

Zunächst benötigen Sie ein Bild für Ihren Splash Screen:

• Größe: Verwenden Sie ein hochauflösendes Bild (mindestens 2000 x 2000 Pixel), das auf allen Gerätebildschirmen gut aussieht
• Format: PNG ist das am häufigsten verwendete Format für Splash Screens
• Ausrichtung und sicherer Bereich: Halten Sie wichtige Inhalte in Richtung Bildmitte

Profi-Tipp: Tools wie App Icon Generator (appicon.co) können helfen, korrekt dimensionierte Bilder für verschiedene iOS-Bildschirme zu erstellen.

Schritt 2: Den Splash Screen in Xcode hinzufügen

1. Öffnen Sie das iOS-Projekt in Xcode: Navigieren Sie zum Ordner ios und öffnen Sie die Datei .xcworkspace oder .xcodeproj.
2. Bild-Assets hinzufügen: Suchen Sie in Xcode nach Images.xcassets, erstellen Sie ein New Image Set namens ""Splash"" und fügen Sie Ihr Splash-Bild hinzu.
3. Launch Screen Storyboard bearbeiten: Öffnen Sie LaunchScreen.storyboard, löschen Sie alle Standardelemente und fügen Sie eine Image View hinzu. Setzen Sie das Bild auf Ihr Splash-Bild, ändern Sie die Größe oder beschränken Sie es und stellen Sie den Content Mode ein (Aspect Fit oder Aspect Fill).
4. Sicheren Bereich einstellen (falls nötig): Deaktivieren Sie bei Bedarf ""Use Safe Area"", damit das Bild unter Statusleisten-/Notch-Bereiche reichen kann.

Schritt 3: Info.plist für korrekte Anzeigeeinstellungen ändern

1. Öffnen Sie Info.plist und suchen Sie nach dem Schlüssel ""UILaunchStoryboardName"".
2. Stellen Sie sicher, dass sein Wert der Name Ihres Storyboards ist (z.B. ""LaunchScreen"").
3. Überprüfen Sie, ob die LaunchScreen-Datei im App-Target enthalten ist.

Führen Sie nun Ihre App auf einem iOS-Simulator oder -Gerät aus, um zu sehen, wie Ihr Splash Screen beim Start kurz erscheint.

Verwendung einer Bibliothek für einen Splash Screen

Die Verwendung einer Bibliothek kann den Prozess vereinfachen und zusätzliche Kontrolle bieten. Zwei beliebte Bibliotheken sind:

• react-native-splash-screen – Weit verbreitet für iOS und Android
• expo-splash-screen – Für den Expo Managed Workflow

Verwenden wir react-native-splash-screen:

1. Bibliothek installieren:

   npm install react-native-splash-screen --save
   

   oder

   yarn add react-native-splash-screen
   

2. iOS: Pods installieren:

   cd ios
   pod install
   cd ..
   

3. iOS-nativen Code konfigurieren:

   • AppDelegate.m ändern:

     #import ""RNSplashScreen.h""  // diesen Import hinzufügen
     

     In der Methode application:didFinishLaunchingWithOptions: hinzufügen:

     - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
         // ... existierender React Native Bootstrapping-Code ...
         [self.window makeKeyAndVisible];
         [RNSplashScreen show];  // den Splash Screen anzeigen
         return YES;
     }
     

   • Info.plist überprüfen: Stellen Sie sicher, dass UILaunchStoryboardName immer noch auf Ihr LaunchScreen-Storyboard gesetzt ist.

4. Android-nativen Code konfigurieren (falls nötig):

   • SplashScreen in MainActivity importieren
   • SplashScreen.show(this) vor super.onCreate aufrufen
   • Ein launch_screen.xml-Layout hinzufügen
   • Das AndroidManifest aktualisieren

5. Den Splash Screen in Ihrem React Native-Code ausblenden:

   // App.js (oder index.js)
   import React, { useEffect } from 'react';
   import { View, Text } from 'react-native';
   import SplashScreen from 'react-native-splash-screen';  // Bibliothek importieren
   
   const App = () => {
     useEffect(() => {
       // Den Splash Screen ausblenden, sobald die App bereit ist
       SplashScreen.hide();
     }, []);
   
     return (
       <View>{/* Ihre App-UI-Komponenten beginnen hier */}
         <Text>Hallo, Haupt-App!</Text>
       </View>
     );
   };
   
   export default App;
   

Umgang mit Splash Screen-Timing & Übergängen

• Kurz halten: Ein Splash Screen sollte nur so lange sichtbar sein wie nötig (idealerweise 1-3 Sekunden)
• Ausblenden, wenn bereit: Rufen Sie SplashScreen.hide() auf, sobald der Hauptinhalt Ihrer App angezeigt werden kann
• Übergang anpassen: Verwenden Sie im ersten Bildschirm Ihrer App die gleiche Hintergrundfarbe wie im Splash Screen
• Sanfte Animationen: Erwägen Sie, eine subtile Animation beim Ausblenden des Splash Screens hinzuzufügen
• Einheitliche Dauer: Manche Apps zeigen den Splash für eine Mindestzeit (z.B. 2 Sekunden), auch wenn die App schneller lädt

Häufige Probleme & Debugging-Tipps

• Splash Screen wird nicht angezeigt: Überprüfen Sie UILaunchStoryboardName in Info.plist, stellen Sie sicher, dass die LaunchScreen-Datei im App-Target ist, und bestätigen Sie, dass Bild-Assets enthalten sind
• Bild ist gestreckt oder abgeschnitten: Überprüfen Sie die Content Mode-Einstellungen, die Constraints und stellen Sie sicher, dass Sie die richtigen Bildgrößen bereitgestellt haben
• Splash Screen blinkt und dann erscheint ein leerer Bildschirm: Blenden Sie den Splash nur aus, wenn Ihre UI bereit ist, und passen Sie die Hintergrundfarben an
• Splash Screen bleibt hängen: Stellen Sie sicher, dass SplashScreen.hide() aufgerufen wird, und prüfen Sie auf frühe Fehler
• Falsches Seitenverhältnis auf dem iPad: Verwenden Sie Constraints anstelle fester Größen, setzen Sie Storyboard-Geräte auf Universal und stellen Sie hochauflösende Bilder bereit
• Änderungen werden nicht übernommen: Bereinigen Sie den Build, installieren Sie die App neu und stellen Sie sicher, dass Sie die richtigen Dateien bearbeiten

Fazit

Das Hinzufügen eines Splash Screens zu Ihrer React Native App ist ein kleiner Schritt, der zu einer professionelleren und benutzerfreundlicheren Erfahrung führt. Indem Sie entweder einen Splash Screen manuell in Xcode einrichten oder Bibliotheken wie react-native-splash-screen verwenden, können Sie einen Splash Screen integrieren, der Ihre Marke zeigt und die Benutzer während des Starts engagiert hält.

Denken Sie an das Timing und stellen Sie reibungslose Übergänge zwischen dem Splash Screen und dem ersten Bildschirm Ihrer App sicher. Bei richtiger Implementierung wird Ihr Splash Screen die wahrgenommene Qualität Ihrer App vom Moment des Starts an verbessern.

FAQs