Come aggiungere una schermata iniziale per reagire nativamente (Android)

https://medium.com/@rocksinghajay

Nel mio precedente articolo, ho scritto su come aggiungere una schermata iniziale per reagire nativamente (IOS).

Ora, in questo articolo, ti dirò come possiamo aggiungere un tocco a reattivo-nativo (Android). Ti dirò semplici passi. E questa è una cosa molto iniziale che possiamo creare per ogni applicazione mobile. Quindi, è una cosa molto importante per ogni sviluppatore sapere come aggiungerlo nel modo giusto.

Puoi visualizzare l'intero codice sorgente qui:

Sto usando un semplice progetto nativo di reazione per aggiungere la schermata iniziale. Quindi, iniziamo inizializzando il progetto nativo di reazione nel tuo sistema.

init splash-native SplashScreenReactNative
cd SplashScreenReactNative

Dopo aver eseguito queste due linee nel terminale, dovrai reagire al progetto nativo sul tuo sistema.

Se hai notato che l'applicazione nativa di reazione ha una schermata iniziale di sfondo bianco. In quella schermata, stiamo aggiungendo la nostra schermata iniziale personalizzata. Come notare la prima schermata bianca iniziale, dobbiamo prima impostare un colore di sfondo scuro nella nostra app.

Sostituisci il tuo componente App.js con il codice seguente

È sufficiente sostituire il colore di sfondo con il rosso scuro e il colore del testo in bianco.

Aggiungi la schermata iniziale all'app Android

Apri prima il tuo progetto in Android Studio.

Dopo aver aperto il progetto su Android Studio, andrai alla cartella mipmap che si trova nella cartella android / app / src / main / res e ogni densità di pixel ha una densità diversa aggiunta al nome della cartella che puoi trovare nello screenshot qui sotto .

Android / app / src / main / res

E questo è il luogo in cui tutte le immagini dovrebbero andare secondo la sua cartella mipmap a densità di pixel

Puoi creare la tua icona qui Android Asset Studio e ti fornirà tutte le immagini delle cartelle mipmap.

E copia tutte le immagini secondo la sua cartella mipmap.

icon.png

Nel prossimo passaggio, andremo a creare la schermata iniziale che viene visualizzata al primo avvio dell'applicazione.

  1. Crea un file background_splash.xml in android / app / src / main / res / drawable potresti creare prima una cartella disegnabile nella cartella res.

E il seguente codice:

drawable / background_splash.xml

2. Nel prossimo, creeremo un file colors.xml in valori android / app / src / main / res / che definiremo il nostro colore rosso che è lo stesso del rosso nella nostra applicazione.

E il seguente codice:

Android / app / src / main / res / valori / colors.xml

Quindi apri un file styles.xml in android / app / src / main / res / valori / styles.xml e aggiungi il seguente codice:

3. Nei prossimi passi, diremo che la nostra applicazione inizialmente avvia SplashTheme. E lo faremo nel file AndroidManifest.xml e all'interno di

Aggiungi il seguente codice:

E modificare MainActivity in modo che sia il seguente. Aggiungi android: exported = "true" e commenta la

Ora avvia la tua applicazione e vedi che tutto funziona bene o no.

schermata iniziale

E funziona bene, ma c'è un problema dopo che si è verificato un caricamento della schermata iniziale, può essere risolto aggiungendo un modulo di reazione-schermata iniziale nativa per reagire all'applicazione nativa.

aggiungere il filo di [email protected]
collegamento di reazione nativo

Quindi configura App.js nella tua applicazione.

Spero che ti sia piaciuto questo articolo su Come aggiungere una schermata iniziale per reagire nativamente (ANDROID).

Clap per questo articolo se lo trovi utile

Sentiti libero di commentare e apprezzare questo articolo in modo che altri possano trovarlo facilmente su Medium!

Ciao, mi chiamo Ajay Singh Rajput. Sono uno sviluppatore frontend di ZestGeek. Scrivo su JavaScript e reazione. E condividendo la mia visione del mondo con tutti, unisciti alla mia ricerca seguendomi su Twitter o Medium.

Vuoi saperne di più su JavaScript, Reactjs e Life? Guarda i miei altri articoli:

E grazie per aver letto questo articolo se ti piace, poi condividerlo con i tuoi amici e nemici. E scriverò di più su JavaScript, React.js, rimani connesso con me.