Quindi, iniziamo con la nostra applicazione qui e ci sono vari modi per iniziare ovviamente, voglio
iniziare
prima di tutto lasciando cadere questo stile contenitore qui nella mia schermata iniziale e invece, voglio liberarmi del testo e
tutto qui e voglio iniziare aggiungendo la mia intestazione, quindi questa
barra nella parte superiore dello schermo.
Ora possiamo creare una barra da soli qui, permettimi di liberarmi di quell'importazione di cui non
abbiamo bisogno e la costruirò non all'interno di questo componente dell'app ma in un
file componente separato, in un componente personalizzato separato perché e questa è già una cosa molto importante da
portare via,
proprio come in React per le app Web, è una buona pratica dividere l'app in più componenti che poi componi
insieme perché ciò porta a un codice più gestibile e riutilizzabile.
Quindi aggiungerò una nuova cartella, componenti, il nome dipende da te, puoi nominare quella cartella come vuoi
e lì dentro voglio avere un'intestazione. file js per contenere il componente dell'intestazione.
Lì, dobbiamo importare React da React in modo da poter usare React lì
e scrivere codice jsx e quindi avremo anche bisogno di alcuni componenti di React Native perché non devi mai dimenticare che questi
sono gli unici componenti principali che puoi usare nel fine.
Non puoi usare alcun elemento HTML web o qualcosa del genere, hai
bisogno di queste primitive fondamentali che React Native ti offre.
Quindi avremo sicuramente bisogno di una vista qui e anche un componente di testo e anche un componente di foglio di stile
e ora, con quello, possiamo iniziare a costruire la nostra intestazione.
Quindi, per questo, aggiungerò una costante di intestazione che contiene il mio componente funzionale perché lavorerò con i componenti funzionali solo in
questo corso, useremo gli hook in luoghi in cui dobbiamo gestire lo stato o gli effetti collaterali
e qui, lo faremo ovviamente esporta questo componente alla fine e imposta anche un oggetto di stile con il foglio
di stile creato in modo da poterlo definire alla fine.
Ora creiamo il nostro componente qui, restituiamo qualcosa qui
e ciò che voglio restituire
è alla fine una vista con il testo al suo interno e il testo dovrebbe essere
il nostro titolo.
Quindi quindi tra il tag di apertura e chiusura qui, emetterò il titolo degli oggetti di scena in modo che il nostro
componente possa ricevere il titolo degli oggetti di scena e produrre qui. E la vista che circonda il testo verrà utilizzata per posizionare
il testo e per dare un po 'di stile, quindi per dare uno stile alla nostra intestazione perché anche gli
elementi di testo sono personalizzabili ma non nella stessa misura delle viste, le viste sono davvero un po' più flessibile riguardo
agli stili che puoi assegnare e riguardo a come si comportano e quindi, vuoi sempre
usare una vista per un tale contenitore circostante e per questo stile generale che il tuo componente potrebbe avere
o parti del tuo componente potrebbero avere.
Quindi qui, aggiungerò il puntello di stile e assegnerò uno stile al mio oggetto di stili, uno stile che non abbiamo ancora creato
lì ma lo chiamerò header e darò anche al testo un puntello di stile e punto titolo dell'intestazione degli stili o come si desidera denominarlo perché, come ho già
detto, è possibile anche lo stile del testo e qui voglio avere alcuni stili specifici del
testo in seguito per assicurarsi anche che il testo appaia bene. Quindi ora qui nel foglio di stile, possiamo iniziare a
dare uno stile alla nostra intestazione e inizierò con l'intestazione stessa, aggiungendo un prop di intestazione e quindi questo oggetto
conterrà queste definizioni di stile per l'intestazione, quindi per questo componente di visualizzazione qua e là di
ovviamente, sei libero di sperimentare ciò che vuoi. Vado con una larghezza del 100% in modo
che ci vuole la larghezza del dispositivo completa che possiamo ottenere o l'intera larghezza del componente padre per essere precisi,
ma lo aggiungerò in modo tale che il componente padre occupi l'intera larghezza del dispositivo e quindi
, questo richiederà anche l'intera larghezza del dispositivo alla fine. Assegna un'altezza e lì, puoi sperimentare
valori diversi, ho trovato 90 abbastanza decenti e quindi ci proverò.
Nota a margine, per ora ottimizzerò per queste schermate che ho qui, nel prossimo modulo del corso, approfondiremo come
puoi regolare le tue visualizzazioni e il tuo codice per diversi dispositivi, sia per quanto riguarda le dimensioni che per quanto
riguarda la piattaforma il tuo codice è in esecuzione. Per ora, non avremo alcuna differenziazione lì, ci adegueremo
anche nella nostra app per avere un bell'aspetto su questi due emulatori ma, di nuovo, riprenderò più avanti.
Quindi un'altezza di 90, un'imbottitura in cima a 36 per avere un po 'di spazio in alto e
devo aggiungere questo per far fronte sostanzialmente o cose come la barra di stato qui o
questa tacca qui, quindi quindi aggiungo questa parte superiore e voglio anche per aggiungere un colore
di sfondo qui e ora sei ovviamente completamente libero
di scegliere qualsiasi colore desideri, ho preparato un bel colore, un codice esadecimale di un colore che mi piace personalmente
e che è # f7287b che è un bel colore nel mio opinione come vedrai tra un secondo.
Ora voglio anche centrare il titolo e, quindi, userò allineare gli elementi e justifyContent perché
ogni vista per impostazione predefinita usa flexbox e quindi con allineare gli elementi e justifyContent, possiamo
controllare come gli elementi figlio della vista sono posizionati all'interno della vista e con il centro per
allineare gli
elementi e giustificare Il contenuto impostato anche al centro, centriamo tutti gli elementi figlio o figlio all'interno della vista al
centro, sia in orizzontale che in verticale.
Ora per il titolo
dell'intestazione, voglio anche impostare alcuni stili per questo.
Quindi il titolo dell'intestazione qui, che dovrebbe ottenere un colore nero perché si adatterà a questo colore qui e in modo che possiamo leggere il
testo e voglio impostare la dimensione del carattere su 18 diciamo, in modo da avere questo
fisso, un po ' dimensione del carattere maggiore qui. Detto questo, proviamo a usare questa
intestazione e usiamola nell'app. file js qui. Lì abbiamo questa
vista e questa vista non ha stile.
Lo cambierò e imposterò una schermata qui e fornirò un attributo flessibile.
Ora possiamo assegnarlo qui e fletterne uno assicurerà che questa vista occupi tutto lo spazio che può
ottenere e poiché è la vista radice della nostra applicazione, ciò significa che prenderà tutta
la larghezza e l'altezza che può ottenere, occuperà tutto schermo e quindi poiché la mia intestazione ha una larghezza del
100%, poiché la aggiungerò direttamente all'interno di questa vista, che è ora configurata per assumere l'intera larghezza e altezza,
questa intestazione prenderà anche l'intera larghezza.
Quindi ora dobbiamo solo aggiungere l'intestazione,
ovviamente, quindi importare l'intestazione da. / components / header, puoi
omettere l'estensione del file e quindi aggiungere semplicemente l'intestazione come tag autochiudente qui, ma non dimenticare di impostare un oggetto titolo
perché ricorda che qui stiamo proponendo il titolo oggetto tra i tag testo, quindi
noi posso aggiungere un titolo qui e lo nominerò indovinare un numero perché è di questo che tratta il nostro gioco.
Ora se lo salviamo, dovrebbe essere ricostruito automaticamente e dovresti vedere un'intestazione simile a questa sull'iPhone e come questa qui su
Android e direi che va bene per entrambi i dispositivi. Ancora una volta, esploreremo in seguito i modi
in cui è possibile ottimizzare l'aspetto del dispositivo specifico su cui è in esecuzione l'app.