Ich arbeite mit einer React Native-App und versuche, einen benutzerdefinierten Startbildschirm einzurichten, kann dies jedoch nicht.

React Native erstellt standardmäßig eine LaunchScreen.xib, daher habe ich in Images.xcassets ein LaunchImage erstellt:

Ich habe auch gelesen, dass ich die "Startbildschirmdatei" unter "App-Symbole und Bilder starten" in meinen Optionen ändern muss:

Sobald ich das getan habe, wurde mein Startbildschirm komplett schwarz und wenn die App geladen wird, gibt es sowohl obere als auch untere schwarze Rahmen:

Ich weiß also nicht, was ich tun muss, um meinen Startbildschirm in meinem React Native-Projekt festzulegen.

Ich bin dankbar, wenn mir jemand bei diesen Problemen helfen kann.

Danke im Voraus.

Ich konnte das Problem mithilfe dieses Threads lösen: Starten Sie das Bild, das in der iOS-Anwendung nicht angezeigt wird (mithilfe von Images.xcassets).

Also werde ich es ausführlich erklären, falls es jemand anderem helfen kann.

Zunächst müssen Sie bestimmte Bilder erstellen. Was ich dafür verwendet habe, war diese Vorlage und diese Webseite mit einem automatischen Generator: TiCons

Als ich meine Bilder heruntergeladen habe, habe ich die Bilder im Ordner "Assets / iPhone" genommen. Ich habe nur die Bilder genommen:

• [email protected] (640x960)
• [email protected] (640x1136)
• [email protected] (750x1334)
• [email protected] (1242x2208)
• [email protected] (2208x1242)

Außerdem benötigen Sie diese Contents.json- Datei im selben Ordner. Ich habe sie von einem Freund erhalten:

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}

Zu diesem Zeitpunkt habe ich einen Ordner namens LaunchImage.launchimage im Ordner Images.xcassets in meinem React Native-Projekt erstellt und die Bilder und die Datei Contents.json darin gespeichert:

Zweitens müssen Sie Ihr Projekt in Xcode öffnen und in den Einstellungen "Allgemein" unter " App-Symbole und Bilder starten " die Option " Bildschirmdatei starten " leer lassen (außerdem können wir die Datei " LaunchScreen.xib " in unserem Projekt löschen ) und klicken Sie anschließend auf " Asset-Katalog verwenden ". Ein modal öffnet, wählen wir migrieren die Katalogbilder

Jetzt, in der „ Starten Sie Images Quelle “ Selektor, können wir den Ordner wählen wir vor erstellt, LaunchImage (die mit unseren Bildern):

Wir wählen dies anstelle von Brand Assets und können den Ordner Brand Assets löschen .

An diesem Punkt können wir unsere React Native-Anwendung mit unseren benutzerdefinierten Startabbildern ausführen:

Ich weiß, dass es für eine vermeintlich einfache Aufgabe ein bisschen komplex erscheint, aber nachdem ich viel darüber gelesen hatte, war dies die einzige Möglichkeit, meine Splash-Bilder zum Laufen zu bringen, und wollte sie mit der Community teilen.

Stellen Sie sicher, dass Sie die App aus dem Simulator löschen. Dann säubern Sie Ihr Projekt.

Ich habe mir diese Antworten in SO-haltigen Lösungen zum Erstellen eines neuen Startbildschirms viel angesehen. Ich meine, lass uns eine Minute darüber nachdenken.

Was sehen wir beim Starten eines neuen reaktionsnativen Projekts für den Startbildschirm?

> Standard-Startbildschirm von Facebook

Das brachte mich zum Nachdenken: Wie haben sie das gemacht?

Sie haben eine LaunchScreen.xib

Ich denke, dafür muss es einen Grund geben. Also ging ich in die LaunchScreen.xibund nahm eine Änderung am Standardtext "React Native ..." vor oder was auch immer es sagte. Ich habe die App noch einmal ausgeführt, um festzustellen, dass der Startbildschirm meine Änderungen widerspiegelte.

Lösung 1 Bearbeiten Sie die vorhandene LaunchScreen.xib

Lösung 2 Erstellen Sie meine eigenen

Also habe ich länger gebraucht, um diese Antwort zu schreiben, als zu lernen, wie man meine eigene erstellt. Both of these solutions are compatible with all the devices.

Schritt 1:

Löschen LaunchScreen.xib

Schritt 2:

Klicken Sie mit der images.xcassets rechten Maustaste in den Leerraum. Klicken Sie **import**dann auf das Bild, das Sie hinzufügen möchten.

Schritt 3:

Klicken Sie mit der rechten Maustaste auf den Stammordner Ihres Projekts, fügen Sie eine neue Datei hinzu Launch Screenund benennen Sie sie nach Belieben.

Schritt 4

Klicken Sie im linken Navigationsbereich auf Ihr Projekt und gehen Sie zu Settings> Generalund darunter App Icons and Launch Images. Stellen Sie sicher, dass Launch Image Sourcedas Feld leer ist und dass Launch Screen Filees denselben Namen wie Ihr neu erstellter Startbildschirm hat.

Schritt 5

Klicken Sie auf Ihre brandneue Datei, in der Sie sie erstellt haben step 2, ziehen Sie sie Image Viewoder bearbeiten Sie sie, wie es Ihnen gefällt.

Dann ist es soweit, du bist fertig. Sie müssen die Lösung nicht einmal reinigen, sondern nur neu erstellen.

Aktualisieren

generator-rn-toolboxist veraltet. Verwenden Sie stattdessen react-native-make .

alte Antwort

Ich empfehle die generator-rn-toolbox zum Anwenden des Startbildschirms oder des Hauptsymbols mit on react-native. Es ist einfacher und einfacher durch cli als reaktionsnativ zu verwenden.

• XCode muss nicht geöffnet werden.
• Sie müssen nicht viele Bilddateien für verschiedene Auflösungen erstellen.
• Ändern Sie den Startbildschirm jederzeit mit einer Zeile.

Bedarf

• Knoten> = 6
• Ein quadratisches Bild oder eine PSD-Datei mit einer Auflösung von mehr als 2208 x 2208 Pixel für einen Startbildschirm ( Begrüßungsbildschirm )
• Positiver Geist ;)

Installieren

1. Installieren Sie die generator-rn-toolbox und yo
2. npm install -g yo generator-rn-toolbox
3. Installieren Sie imagemagick brew install imagemagick

4. Begrüßungsbildschirm auf iOS anwenden

   yo rn-toolbox:assets --splash YOURIMAGE.png --ios

   oder Android

   yo rn-toolbox:assets --splash YOURIMAGE.png --android

Das ist alles. :) :)

Quelle

Ich bin gerade durchgegangen und habe ein Vergnügen. Die einzige Straßensperre, die ich entdeckte, war das Löschen des Simulatorinhalts. Wenn Sie feststellen, dass Ihr neuer Startbildschirm nicht funktioniert, müssen Sie die Simulation öffnen und Folgendes ausführen:

Simulator> Inhalt und Einstellungen zurücksetzen

In diesem Simulator muss Hardcore-Caching stattfinden, aber sobald dies erledigt ist, führen Sie es erneut aus und Sie sehen die App. Stellen Sie sicher, dass Sie dies sowohl für Xcode-Simulatoren als auch für reaktionsnative Simulatoren tun!

Stellen Sie sicher, dass die Auswahl "Startbildschirmdatei" leer ist:

Folgen Sie diesem Link:

Wenn Sie meiner React Native-Anwendung einen Begrüßungsbildschirm hinzufügen möchten, folgen Sie dem Vorgang. Das Ergebnis liegt ganz bei Ihnen.

SCHRITT: 1 Zuerst habe ich einen splashImageResource-Ordner erstellt und die Datei launchScreen.xib mit dem Begrüßungsbild hinzugefügt.

SCHRITT: 2 Ändern Sie den Code so, wie er im Subviews-Tag geschrieben ist. mit diesem Code<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

SCHRITT 3 Sie sollten Ihre App in Xcode öffnen. Hier sind die folgenden Schritte:

a) Gehen Sie zu Ihrem Projektordner

b) Öffnen Sie den ios-Ordner

c) Gehen Sie zu der Datei mit der Erweiterung .xcodeproj, in meinem Fall splasScreenTutorial.xcodeproj

d) Öffnen Sie diese Datei in Ihrem Xcode.

e) Löschen Sie die Datei launchScreen.xib.

f) Klicken Sie auf den Ordner splashScreenTutorial und gehen Sie zum Abschnitt ZIELE

g) Klicken Sie auf die Registerkarte Allgemein in der oberen linken Ecke Ihres Xcodes und scrollen Sie nach unten zu App-Symbolen und starten Sie Bilder

h) Gehen Sie zu Bilderquelle starten und klicken Sie auf Asset-Katalog verwenden. Klicken Sie auf Migrieren.

i) Entfernen Sie den Text LaunchScreen aus der Launch Screen-Datei.

j) Gehen Sie zurück zu Ihrem Projektordner und öffnen Sie die Datei Images.xcassets. Sie sollten AppIcon und LaunchImage sehen.

k) Klicken Sie anschließend auf LaunchImage. Ziehen Sie abschließend die Begrüßungsbildschirme unterschiedlicher Größe in das Feld Startbild.

Ziehen Sie die Bilder wie folgt.

Test-Begrüßungsbildschirm a) Um die Änderungen anzuzeigen, müssen Sie die App aus Ihrem Simulator löschen, wenn Sie die App ursprünglich ausgeführt haben.

b) Um die App zu löschen, klicken Sie in Ihrer Simulatorleiste auf das Menü Hardware und gehen Sie zu Startseite.

c) Tippen und halten Sie das bestimmte App-Symbol, das Sie löschen möchten, und klicken Sie auf das X-Zeichen auf dem Symbol.

d) Führen Sie Ihre App erneut mit reaktionsnativen Run-Ios aus

Sie können Ihren Begrüßungsbildschirm sehen

Für mich weiter XCode 10.1und react-native 59.2ich musste die zusätzlichen Schritte durchlaufen, nachdem ich bereits die Bilder, das Storyboard und 1 Universalbild hinzugefügt hatte.

• Klicken Sie mit der rechten Maustaste auf das Bild, klicken Sie auf Show in Finderund bearbeiten Sie Ihre Contents.jsonDatei
• Fügen Sie das Bild den Abschnitten 2x und 3x hinzu
• Gehen Sie zum Startbildschirm-Storyboard mit dem Menü "Lineal"
• Stellen Sie sicher, dass nur die inneren roten Pfeile aktiviert sind, nicht die äußeren roten Pfeile
• Klicken Sie auf "Relative Ränder für sichere Bereiche".

Das Bild sollte jetzt auf iPhones aller Größen zentriert sein (auf Portrait getestet).

Wenn Sie die vorhandene .xib-Datei für den Startbildschirm verwenden möchten, die React Native ursprünglich eingerichtet hat, jedoch mit Ihrem eigenen Logo und Ihrer eigenen Hintergrundfarbe (und ohne den Standardtext von React Native), können Sie den Anweisungen hier folgen: https: // medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec .

Wenn Sie mit Hilfe von React einen Startbildschirm erstellen, sollten Sie in der Datei LaunchScreen.xib in iOS Xcode dasselbe hinzufügen, damit Sie einen Screenshot erstellen und ihn als Bild in die Kassetten Images.x hinzufügen können.

Öffnen Sie LaunchScreen und fügen Sie UIImageView in der Ansicht aus der Objektbibliothek im rechten Bereich in Xcode hinzu.

Fügen Sie der Ansicht nachfolgende, führende, untere und obere Einschränkungen hinzu. Wie nachfolgend dargestellt -

Vergessen Sie nicht, den UIImageView ContentMode als AspectFit zu ändern, damit er beim Ausführen der App gleich aussieht.

Danach müssen Sie Code in AppDelegate hinzufügen, damit Sie keinen weißen Bildschirm erhalten. Der Code lautet -

 UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
 launchScreenView.frame = self.window.bounds;
 rootView.loadingView = launchScreenView;

Sie können auf https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip verweisen

Nur für diejenigen, die immer noch Probleme haben, fehlt in der akzeptierten Antwort ein weiterer Schritt, bevor der iOS-Startbildschirm funktioniert.

Öffnen Sie Info.plistim Projektordner und löschen Sie den Schlüssel "Basisname der Hauptnib-Datei". Dann wieder aufbauen und hoffentlich ist das Problem weg.

Nachdem ich die oben genannten Lösungen befolgt hatte, blieb meine App auf dem Begrüßungsbildschirm hängen, sodass ich die folgenden 7 Schritte ausführte, um den benutzerdefinierten Begrüßungsbildschirm auf ios hinzuzufügen.

1. Öffnen Sie den Xcode und suchen Sie die LaunchScreen.xibDatei in Ihrem Projekt (Beachten Sie, dass dies der Bildschirm ist, der standardmäßig in ios angezeigt wird).
2. Um den Text auf dem Bildschirm zu entfernen / zu bearbeiten, klicken Sie darauf und nehmen Sie die erforderlichen Änderungen vor.
3. Um die Hintergrundfarbe zu ändern, suchen Sie die folgenden Symbole in der rechten Seitenleiste und klicken Sie auf die kleine Symbolschaltfläche ganz oben, viertens von links (wenn Sie den Mauszeiger bewegen, wird "Attributinspektor anzeigen" angezeigt).

4. Nachdem Sie nun wissen, wie Sie die Hintergrundfarbe ändern können, können Sie dem Begrüßungsbildschirm ein Bild hinzufügen. Klicken Sie dazu auf die folgende Schaltfläche und wählen Sie die Bildansicht aus der Liste aus. Ziehen Sie sie und platzieren Sie sie an der gewünschten Stelle auf dem Begrüßungsbildschirm.

5. Jetzt müssen wir das Bild zum hinzufügen, Images.xcassetsdamit wir es in der LaunchScreen.xibAnleitung referenzieren können Images.xcassets. Klicken Sie auf die +Schaltfläche importund anschließend auf das Bild, das Sie im Begrüßungsbildschirm anzeigen möchten. Darunter AppIconsehen Sie den Namen Ihrer Bilddatei. Dies ist der Name, auf den wir in unserem Artikel verweisenLaunchScreen.xib

6. Jetzt müssen wir auf das Bild verweisen, das wir in der LaunchScreen.xibDatei hinzugefügt haben. Navigieren Sie zurück zu dem zuvor hinzugefügten Bild LaunchScreen.xibund klicken Sie image viewdarauf. In der rechten Ecke sehen Sie eine Reihe von Optionen. Klicken Sie auf das erste imageBild und wählen Sie das Bild aus, das Sie in Schritt 5 importiert haben

7. Bereinigen Sie das Projekt und führen react-native run-iosSie es aus. Die Änderungen sollten angezeigt werden.

Sie sollten die Bildquelle des Startbildschirms als Bildsatz festlegen. Löschen Sie anschließend die Datei LauncScreen.xib. Führen Sie anschließend eine globale Suche in Ihrem Projekt durch und entfernen Sie alle Verweise auf LaunchScreen.xib (sehen Sie in Ihrem gesamten Projekt nach. Ich verwende einen erhabenen Texteditor, also ist es cmd + shift + f) und es sollte funktionieren.