Prima di continuare con il processo di compilazione o pubblicazione e quindi portarlo negli app
store, continuiamo a configurarlo.
Ora per uno, ci sono alcuni spazi vuoti qui come la descrizione che manca e che
potresti aggiungere aggiungendo
una chiave di descrizione qui con del testo e quella sarebbe la descrizione che appare qui.
Importante, non è una descrizione che appare negli
app store, è davvero solo una descrizione che appare qui e puoi
saperne di più sulla descrizione, tutti gli altri tasti che puoi impostare qui in questa pagina.
Dopotutto ci sono molte impostazioni che puoi configurare.
Ora quello che mi interessa in questo momento è l'icona e la parte della schermata iniziale perché è l'icona che
le persone vedranno nella schermata principale,
ovviamente non ancora perché in questo momento non stiamo pubblicando le app sull'App Store ma ciò cambierà e
la schermata iniziale,
questo è ciò che gli utenti vedono quando
la nostra app viene caricata ed entrambi sono elementi che in genere si desidera personalizzare.
Ora expo ti dà un'icona e una schermata iniziale pronta all'uso, ma entrambi sono solo segnaposto vuoto, giusto,
quindi non è troppo sorprendente, invece vogliamo
fornire la nostra icona, la nostra immagine schermata iniziale qui.
Ora sei davvero flessibile riguardo a ciò che fornisci qui, ma in generale, è
una buona idea fornire un'icona nella risoluzione 1024 x 1024, quindi un'icona quadrata
come input e per la schermata iniziale, puoi creare una schermata iniziale come descritto nei documenti ufficiali in cui è
possibile saperne di più su come è possibile creare una schermata iniziale,
come è possibile strutturarla e così via.
Ora ho preparato qualcosa per te che puoi usare per seguire ora che non dovresti usare per una distribuzione reale perché
queste risorse sono solo per questo corso, non per te da usare nella tua app che prevedi di distribuire
e per quella allegata che trovi le icone. file zip.
Ora, se decomprimilo, troverai un posto. file png che puoi ovviamente trascinare e rilasciare nella
cartella delle
risorse, puoi anche eliminare l'icona. file png lì se vuoi.
Puoi anche eliminare lo splash. file png perché in questa cartella allegata troverai
anche questa icona splash. file png che puoi ovviamente trascinare e rilasciare qui.
Ora queste sono solo alcune icone che ho creato che possiamo usare
ora e indietro nell'app. file json, ora possiamo puntare alle icone personalizzate. Importante, dovresti fornire file
png mentre lo sto facendo qui.
Quindi ora per l'icona, possiamo puntare su risorse / luoghi. png e per lo splash, possiamo
indicare che assets / splash_icon. png. Ora come colore di sfondo, lì possiamo usare
un colore nero
scuro come il codice esadecimale # 171717, questo dovrebbe essere un colore del codice esadecimale come questo e la modalità di ridimensionamento qui
può essere impostata per contenere o coprire, la copertura allungherà sostanzialmente l'icona per prendere la larghezza e
l'altezza disponibili, contengono, manterranno la dimensione dell'icona, la centreranno e avranno quel colore di sfondo dietro l'icona.
Ora, se lo facciamo, possiamo già vedere il risultato di questo se
solo npm lo avviamo, quindi il server, come abbiamo fatto molte volte in questo corso o expo, si avvia e poi lo lanciamo di nuovo su
un emulatore, Android o iOS mentre io lo sto facendo qui. Ora questo lo lancia lì e ora vedi, questa è la schermata iniziale
che ne sta già prendendo una nuova, con l'immagine lì dentro che è la nostra grande ma che è apposta
in modo che possiamo vederla chiaramente e il colore di sfondo che è leggermente diverso quindi che
hai anche la possibilità di vedere che, ovviamente, potresti scegliere lo stesso colore per avere una
schermata di avvio senza soluzione di continuità qui.
Quindi funziona e aspettiamo che finisca, ecco l'app
in esecuzione e ora vedi anche la tua icona qui se
vai nel selettore di attività. Vedi che non è così bello con lo
sfondo ma è qualcosa che
possiamo migliorare, ma qui è l'icona in generale, quindi funziona, vediamo sia la schermata iniziale che l'icona e su
iOS sarebbe la stessa. Ora, come puoi dire,
l'icona non è così bella su Android però.
Il motivo è che Android, a seconda della versione di Android in esecuzione sul dispositivo,
utilizza icone diverse, le versioni più recenti e più recenti di Android utilizzano queste cosiddette icone adattive che sono queste icone
arrotondate in cui hai la tua icona nel mezzo e poi un po 'di colore di sfondo o
un'immagine di sfondo anche dietro
di loro, le versioni precedenti avrebbero usato icone quadrate.
Ora puoi provvedere a questo fornendo una configurazione più dettagliata per Android e anche
per iOS, se lo desideri. Invece di avere questa chiave icona generale qui, puoi configurare impostazioni specifiche della piattaforma
ed è anche qualcosa che hai imparato nei documenti ufficiali ovviamente.
Qui puoi trovare informazioni su come configurare splash icona, che è bello, ma
anche su come puoi configurare iOS in un modo specifico
e lì puoi impostare un'icona specifica per iOS se vuoi usarlo.
Naturalmente lo stesso vale per la schermata iniziale, quindi puoi sostanzialmente aggiungere un nodo iOS alla tua
configurazione, lo abbiamo già qui anche qui e dentro, potresti anche aggiungere un'icona e quindi anche una configurazione iniziale che sembra esattamente
o che assomiglierebbe esattamente alla configurazione di root che abbiamo qui, ma ora potresti
sostanzialmente scavalcare queste impostazioni di livello di root generali e avere un'icona specifica per iOS e
una schermata iniziale specifica per iOS.
Quindi è qualcosa che potresti fare e lo stesso vale per Android e ovviamente lo trovi anche
nei documenti ufficiali.
Puoi aggiungere una chiave Android qui alla tua app. file json e quindi questo contiene un oggetto
per così dire, lì puoi anche impostare un'icona e una configurazione splash proprio come l'ho spiegato per iOS
e ora queste impostazioni verrebbero prese per Android,
iOS poiché non ha impostazioni specifiche nel mio esempio qui userei ancora le impostazioni
generali lassù.
Ora la cosa interessante è per Android, non puoi semplicemente impostare una schermata iniziale
specifica per le icone, puoi anche impostare un'icona adattiva qui con la configurazione dell'icona adattiva, che non è disponibile per iOS
perché le icone adattive sono esclusive di Android.
L'icona adattiva accetta un oggetto Javascript, per così dire come un valore di configurazione, non una stringa e questo oggetto
può avere tre chiavi: un'immagine in primo piano, un colore di sfondo o un'immagine di sfondo.
Ora hai un colore di sfondo o un'immagine di sfondo ma dovresti sempre avere un'immagine in
primo piano.
Ora qui possiamo aggiungere l'immagine di primo piano, quindi questa chiave qui e
il colore di sfondo che dovrebbe essere un codice esadecimale a sei cifre come puoi vedere e facciamolo rapidamente
qui e ora possiamo impostare il colore di sfondo per dire che il codice # 171717 e
il l'immagine in primo piano ora può essere impostata sulla nostra icona, anche se
per questo ti consiglio di utilizzare un'icona specifica che
trovi anche allegata qui, i luoghi adattivi. file png che puoi trascinare e rilasciare nella cartella delle risorse e che si adatta ai luoghi. il file png ora può essere usato
qui come immagine di primo piano, in modo che possiamo puntare su risorse e quindi adattarsi
ai luoghi. png.
Ora questa icona, l'icona adattiva i luoghi è trasparente, è ancora l'icona ma ha uno
sfondo trasparente, a differenza dell'altra icona e che quindi consentirà ad Android di
posizionarlo davanti a questo colore di sfondo o immagine di sfondo che hai fornito
e automaticamente dietro gli angoli per te e così via.
Quindi, se ora salviamo questo e questo quindi ricostruisce e per sicurezza che ne tenga davvero conto, riavvierò
il mio server expo qui.
Se ora lanciamo questo su Android e per questo chiuderò anche qui il client expo e
quindi eseguirò nuovamente questo
su Android, dovremmo vedere che una volta riavviato, ora
abbiamo un'icona più bella che sembra un po 'meglio.
Quindi aspettiamo che si
avvii, questa è ancora la schermata iniziale come l'abbiamo configurata in precedenza, inoltre non ho impostato una schermata iniziale specifica per
Android che ovviamente potremmo, ma qui non l'ho
fatto, quindi ovviamente abbiamo ottenuto lo stesso schermata iniziale come in questo modulo e se
ora dai un'occhiata all'icona, sfortunatamente potresti ancora vedere quella vecchia. Il nuovo verrà preso in considerazione
anche se una volta creata questa app come app autonoma e distribuita agli app store.
In generale, la raccomandazione è che per Android, imposti un'icona così adattiva perché copri più
versioni di Android che ovviamente non fanno male. Anche l'impostazione di un'icona così generale non è una cattiva idea
e,
naturalmente, possiamo usare la stessa icona sia per iOS che per Android oppure impostare icone specifiche per
iOS e per Android, come probabilmente indicato per Android, l'icona adattiva. Se vuoi saperne di più sul processo di
creazione e gestione delle icone e delle schermate iniziali, in allegato troverai i documenti ufficiali
dell'esposizione che approfondiscono le diverse opzioni che hai lì e ciò che dovresti considerare.