Sto lavorando con un'app React Native e sto cercando di impostare una schermata di avvio personalizzata ma non ci riesco.

React Native crea un LaunchScreen.xib per impostazione predefinita, quindi ho creato un LaunchImage all'interno di Images.xcassets:

Ho anche letto che devo modificare il "File della schermata di avvio" in "Icone delle app e immagini di avvio" nelle mie opzioni:

Una volta fatto ciò, la mia schermata di avvio è diventata completamente nera e quando l'app viene caricata, ci sono cornici nere sia in alto che in basso:

Quindi non so cosa devo fare per impostare la schermata di avvio nel mio progetto React Native.

Sarò grato se qualcuno mi potrà aiutare con quei guai.

Grazie in anticipo.

Sono stato in grado di risolvere il problema, con l'aiuto di questo thread: Immagine di avvio non visualizzata nell'applicazione iOS (utilizzando Images.xcassets)

Quindi lo spiegherò in profondità nel caso possa aiutare qualcun altro.

Innanzitutto , devi creare determinate immagini. Quello che ho usato per questo era questo modello e questa pagina web con un generatore automatico: TiCons

Quando ho scaricato le mie immagini, ho preso quelle all'interno della cartella assets / iphone, ho preso solo quelle:

• Default@2x.png (640x960)
• Predefinito-568h@2x.png (640x1136)
• Predefinito-667h@2x.png (750x1334)
• Default-Portrait-736h@3x.png (1242x2208)
• Default-Landscape-736h@3x.png (2208x1242)

Inoltre hai bisogno di questo file Contents.json nella stessa cartella, l'ho preso da un amico:

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

Quindi, a questo punto ho creato una cartella chiamata LaunchImage.launchimage all'interno della cartella Images.xcassets nel mio progetto React Native e ho salvato le immagini e il file Contents.json al suo interno:

Secondo , devi aprire il tuo progetto in Xcode e nelle impostazioni "Generali", sotto " Icone app e immagini di avvio " dobbiamo lasciare vuota l'opzione " File schermata di avvio " (possiamo anche eliminare il file LaunchScreen.xib all'interno del nostro progetto ), quindi fai clic su " Usa catalogo risorse ". Si aprirà un modale, scegliamo di migrare le immagini del catalogo

Ora, nel selettore " Launch Images Source ", possiamo scegliere la cartella che abbiamo creato prima, LaunchImage (quella con le nostre immagini):

Scegliamo questo invece di Brand Assets e possiamo eliminare la cartella Brand Assets .

A questo punto, saremo in grado di eseguire la nostra applicazione React Native con le nostre immagini di avvio personalizzate:

So che sembra un po 'complesso per un compito apparentemente facile, ma dopo aver letto molto a riguardo questo era l'unico modo in cui potevo far funzionare le mie immagini splash, quindi volevo condividere con la comunità.

Assicurati di eliminare l'app dal simulatore. Quindi ripulisci il tuo progetto.

Ho guardato molto queste risposte in SO che contengono soluzioni su come creare una nuova schermata di avvio. Voglio dire, pensiamoci un attimo.

Quando creiamo un nuovo progetto reattivo nativo cosa vediamo per la schermata di avvio?

> Schermata di avvio predefinita di Facebook

Quindi questo mi ha fatto pensare, come hanno fatto?

Hanno creato un file LaunchScreen.xib

Penso che ci debba essere una ragione per questo. Quindi sono entrato nel LaunchScreen.xibe ho apportato una modifica al testo predefinito "React Native ..." o quello che diceva. Ho eseguito l'app ancora una volta per vedere che la schermata di avvio rifletteva le mie modifiche.

Soluzione 1 Modificare il LaunchScreen.xib esistente

Soluzione 2 Crea il mio

Così l'ho fatto, mi ci è voluto più tempo per scrivere questa risposta piuttosto che imparare a crearne una mia. Both of these solutions are compatible with all the devices.

Passo 1:

Elimina LaunchScreen.xib

passo 2:

fare clic con il pulsante images.xcassets destro del mouse nello spazio bianco fare clic, **import**quindi selezionare l'immagine che si desidera aggiungere.

fase 3:

Fare clic con il tasto destro sulla cartella principale del progetto e aggiungere un nuovo file di tipo Launch Screene denominarlo come si desidera.

fase 4

Fai clic sul tuo progetto nel menu di navigazione sinistro, vai su Settings> Generale sotto App Icons and Launch Images. Assicurati che Launch Image Sourcesia vuoto e che Launch Screen Fileabbia lo stesso nome della schermata di avvio appena creata.

passaggio 5

Fai clic sul tuo nuovo file che hai creato step 2, trascinane uno Image Viewo modificalo come preferisci.

Allora è tutto, hai finito. Non è nemmeno necessario pulire la soluzione, basta ricostruire.

Aggiornare

generator-rn-toolboxè deprecato. Usa invece react-native-make .

vecchia risposta

Raccomando generator-rn-toolbox per applicare la schermata di avvio o l'icona principale usando su react-native. È più semplice e facile da usare tramite cli come reattivo nativo.

• Non è necessario aprire XCode.
• Non è necessario creare molti file di immagine per varie risoluzioni.
• In qualsiasi momento cambia la schermata di avvio utilizzando una riga.

Requisiti

• nodo> = 6
• Un quadrato file di immagine o psd con una dimensione di più di 2208x2208 risoluzione px per uno schermo di lancio (splash screen)
• Pensiero positivo ;)

Installare

1. Installa generator-rn-toolbox e yo
2. npm install -g yo generator-rn-toolbox
3. Installa imagemagick brew install imagemagick

4. Applica la schermata iniziale su iOS

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

   o Android

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

È tutto. :)

fonte

Ho appena passato questo e funziona a meraviglia. L'unico ostacolo che ho scoperto non è stato cancellare il contenuto del simulatore. Se scopri che la tua nuova schermata di avvio non funziona, devi aprire la simulazione e andare al seguente:

Simulatore> Ripristina contenuto e impostazioni

Deve esserci un caching hardcore in corso all'interno di quel simulatore, ma una volta fatto, riesegui e vedrai l'app. Assicurati di farlo sia per i simulatori xcode che per i simulatori nativi di reazione!

Assicurati che la selezione "File schermata di avvio" sia vuota:

Segui questo link:

Se vuoi aggiungere una schermata iniziale alla mia applicazione React Native, segui il processo, il risultato sarà tutto tuo.

PASSAGGIO: 1 Innanzitutto, ho creato una cartella splashImageResource e aggiunto il file launchScreen.xib con l'immagine splash.

PASSO: 2 modifica il codice come scritto all'interno del tag delle sottoviste. con questo codice<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

PASSAGGIO: 3 Dovresti aprire la tua app in Xcode. Ecco i passaggi da seguire:

a) Vai alla cartella del tuo progetto

b) Apri la cartella ios

c) Vai al file che ha .xcodeproj come estensione, nel mio caso è splasScreenTutorial.xcodeproj

d) Apri questo file nel tuo Xcode.

e) Elimina il file launchScreen.xib.

f) Fare clic sulla cartella splashScreenTutorial, quindi andare alla sezione TARGETS

g) Fai clic sulla scheda Generale nell'angolo in alto a sinistra del tuo Xcode e scorri verso il basso fino a Icone delle app e Avvia immagini

h) Vai a Launch Images Source e fai clic su Use Asset Catalog. Fare clic su migra.

i) Rimuovere il testo LaunchScreen dal file della schermata di avvio.

j) Torna alla cartella del tuo progetto e apri il file Images.xcassets. Dovresti vedere AppIcon e LaunchImage.

k) Quindi, fai clic su LaunchImage, infine trascina le immagini della schermata iniziale di dimensioni diverse nella casella Launch Image.

Trascina le immagini in questo modo.

Schermata iniziale di prova a) Per vedere le modifiche, è necessario eliminare l'app dal simulatore se inizialmente l'app è stata eseguita.

b) Per eliminare l'app, fai clic sul menu Hardware sulla barra del simulatore e vai su Home.

c) Toccare e tenere premuta l'icona dell'applicazione specifica che si desidera eliminare e fare clic sul segno X sull'icona.

d) Esegui di nuovo la tua app utilizzando ios di run-native

Puoi vedere la tua schermata iniziale

Per me su XCode 10.1e react-native 59.2ho dovuto passare attraverso i passaggi aggiuntivi dopo già l'aggiunta del immagini, storyboard e 1 immagine universale.

• Fare clic con il tasto destro sull'immagine, fare clic su Show in Finder, quindi modificare il Contents.jsonfile
• Aggiungi l'immagine alle sezioni 2x e 3x
• Vai allo storyboard della schermata di avvio, con il menu "righello"
• Assicurati che siano attive solo le frecce rosse interne , non le frecce rosse esterne
• Fai clic su "Margini relativi area sicura"

L'immagine dovrebbe ora essere centrata su iPhone di tutte le dimensioni (testata su verticale).

Se desideri utilizzare il file .xib della schermata di avvio esistente inizialmente impostato da React Native, ma con il tuo logo e colore di sfondo (e senza il testo predefinito di React Native), puoi seguire le istruzioni qui: https: // medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec .

Se crei una schermata di avvio con l'aiuto di React, dovresti aggiungere la stessa cosa nel file LaunchScreen.xib in iOS Xcode per fare uno screenshot e aggiungerlo come immagine in Images.xcassets.

Apri LaunchScreen quindi aggiungi UIImageView nella vista dalla libreria degli oggetti dal pannello destro in Xcode.

Aggiungi vincoli finali, iniziali, inferiori e superiori alla vista. Come mostrato di seguito -

Non dimenticare di modificare UIImageView ContentMode come AspectFit in modo che abbia lo stesso aspetto quando viene eseguita l'app.

Dopodiché è necessario aggiungere il codice in AppDelegate in modo da non ottenere uno schermo bianco. Il codice è -

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

Puoi fare riferimento - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

Solo per coloro che hanno ancora problemi, manca un altro passaggio dalla risposta accettata prima di far funzionare la schermata di avvio di iOS.

Apri Info.plistnella cartella del progetto ed elimina la chiave "Nome base file pennino principale". Quindi, ricostruisci e, si spera, il problema sia scomparso.

Dopo aver seguito le soluzioni di cui sopra, la mia app si è bloccata nella schermata iniziale, quindi ho eseguito i 7 passaggi seguenti per aggiungere la schermata iniziale personalizzata su iOS.

1. Apri l'Xcode e individua il LaunchScreen.xibfile nel tuo progetto (nota che questa è la schermata mostrata per impostazione predefinita in ios)
2. Per rimuovere / modificare il testo sullo schermo, fare clic su di esso e apportare le modifiche necessarie a piacere.
3. Per cambiare il colore di sfondo, individua le seguenti icone sulla barra laterale destra e fai clic sul piccolo pulsante icona in alto, il quarto da sinistra (quando passi il mouse, dirà "Mostra l'ispettore attributi")

4. Ora che sai come cambiare il colore di sfondo, aggiungi un'immagine alla schermata iniziale per farlo, fai clic sul pulsante seguente e seleziona la visualizzazione Immagine dall'elenco, trascinala e posizionala dove vuoi nella schermata iniziale.

5. Ora dobbiamo aggiungere l'immagine a in Images.xcassetsmodo da poterla fare riferimento nel LaunchScreen.xibper fare quel goto Images.xcassets. fare clic sul +pulsante seguito da importe quindi aggiungere l'immagine che si desidera mostrare nella schermata iniziale. Sotto AppIconvedrai il nome del tuo file immagine. Questo è il nome che useremo per fare riferimento nel nostroLaunchScreen.xib

6. Ora dobbiamo fare riferimento all'immagine che abbiamo aggiunto nel LaunchScreen.xibfile, quindi torna indietro LaunchScreen.xibe fai clic su quello image viewche abbiamo aggiunto in precedenza e nell'angolo a destra vedrai un sacco di opzioni. fai clic sulla prima che dice imagee seleziona l'immagine che hai importato nel passaggio 5

7. pulisci il progetto ed esegui react-native run-iose dovresti vedere le modifiche.

È necessario impostare l'origine dell'immagine della schermata di avvio come set di immagini. Successivamente eliminare il file LauncScreen.xib. Successivamente fai una ricerca globale nel tuo progetto e rimuovi tutti i riferimenti a LaunchScreen.xib (guarda nel tuo intero progetto. Uso un sublime editor di testo quindi è cmd + shift + f) e dovrebbe funzionare.