1
00:00:02,350 --> 00:00:09,690
Quindi, iniziamo con la nostra applicazione qui e ci sono vari modi per iniziare ovviamente, voglio

2
00:00:09,700 --> 00:00:10,520
iniziare

3
00:00:10,690 --> 00:00:19,420
prima di tutto lasciando cadere questo stile contenitore qui nella mia schermata iniziale e invece, voglio liberarmi del testo e

4
00:00:19,960 --> 00:00:25,060
tutto qui e voglio iniziare aggiungendo la mia intestazione, quindi questa

5
00:00:25,060 --> 00:00:27,790
barra nella parte superiore dello schermo.

6
00:00:28,150 --> 00:00:34,360
Ora possiamo creare una barra da soli qui, permettimi di liberarmi di quell'importazione di cui non

7
00:00:34,360 --> 00:00:39,880
abbiamo bisogno e la costruirò non all'interno di questo componente dell'app ma in un

8
00:00:39,880 --> 00:00:46,630
file componente separato, in un componente personalizzato separato perché e questa è già una cosa molto importante da

9
00:00:46,630 --> 00:00:47,630
portare via,

10
00:00:47,680 --> 00:00:55,360
proprio come in React per le app Web, è una buona pratica dividere l'app in più componenti che poi componi

11
00:00:55,360 --> 00:00:59,540
insieme perché ciò porta a un codice più gestibile e riutilizzabile.

12
00:00:59,540 --> 00:01:04,660
Quindi aggiungerò una nuova cartella, componenti, il nome dipende da te, puoi nominare quella cartella come vuoi

13
00:01:04,910 --> 00:01:09,360
e lì dentro voglio avere un'intestazione. file js per contenere il componente dell'intestazione.

14
00:01:09,490 --> 00:01:14,490
Lì, dobbiamo importare React da React in modo da poter usare React lì

15
00:01:14,500 --> 00:01:23,300
e scrivere codice jsx e quindi avremo anche bisogno di alcuni componenti di React Native perché non devi mai dimenticare che questi

16
00:01:23,300 --> 00:01:27,650
sono gli unici componenti principali che puoi usare nel fine.

17
00:01:27,650 --> 00:01:31,310
Non puoi usare alcun elemento HTML web o qualcosa del genere, hai

18
00:01:31,310 --> 00:01:34,720
bisogno di queste primitive fondamentali che React Native ti offre.

19
00:01:34,850 --> 00:01:40,290
Quindi avremo sicuramente bisogno di una vista qui e anche un componente di testo e anche un componente di foglio di stile

20
00:01:40,520 --> 00:01:43,420
e ora, con quello, possiamo iniziare a costruire la nostra intestazione.

21
00:01:43,550 --> 00:01:51,890
Quindi, per questo, aggiungerò una costante di intestazione che contiene il mio componente funzionale perché lavorerò con i componenti funzionali solo in

22
00:01:51,890 --> 00:01:58,560
questo corso, useremo gli hook in luoghi in cui dobbiamo gestire lo stato o gli effetti collaterali

23
00:01:58,620 --> 00:02:06,170
e qui, lo faremo ovviamente esporta questo componente alla fine e imposta anche un oggetto di stile con il foglio

24
00:02:06,170 --> 00:02:10,460
di stile creato in modo da poterlo definire alla fine.

25
00:02:10,520 --> 00:02:13,020
Ora creiamo il nostro componente qui, restituiamo qualcosa qui

26
00:02:13,040 --> 00:02:14,580
e ciò che voglio restituire

27
00:02:14,750 --> 00:02:19,120
è alla fine una vista con il testo al suo interno e il testo dovrebbe essere

28
00:02:19,120 --> 00:02:20,190
il nostro titolo.

29
00:02:20,300 --> 00:02:26,780
Quindi quindi tra il tag di apertura e chiusura qui, emetterò il titolo degli oggetti di scena in modo che il nostro

30
00:02:26,780 --> 00:02:34,010
componente possa ricevere il titolo degli oggetti di scena e produrre qui. E la vista che circonda il testo verrà utilizzata per posizionare

31
00:02:34,010 --> 00:02:40,790
il testo e per dare un po 'di stile, quindi per dare uno stile alla nostra intestazione perché anche gli

32
00:02:40,880 --> 00:02:47,960
elementi di testo sono personalizzabili ma non nella stessa misura delle viste, le viste sono davvero un po' più flessibile riguardo

33
00:02:47,960 --> 00:02:53,090
agli stili che puoi assegnare e riguardo a come si comportano e quindi, vuoi sempre

34
00:02:53,120 --> 00:02:59,600
usare una vista per un tale contenitore circostante e per questo stile generale che il tuo componente potrebbe avere

35
00:02:59,600 --> 00:03:02,380
o parti del tuo componente potrebbero avere.

36
00:03:02,390 --> 00:03:08,810
Quindi qui, aggiungerò il puntello di stile e assegnerò uno stile al mio oggetto di stili, uno stile che non abbiamo ancora creato

37
00:03:08,810 --> 00:03:16,810
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à

38
00:03:16,820 --> 00:03:21,500
detto, è possibile anche lo stile del testo e qui voglio avere alcuni stili specifici del

39
00:03:21,500 --> 00:03:28,360
testo in seguito per assicurarsi anche che il testo appaia bene. Quindi ora qui nel foglio di stile, possiamo iniziare a

40
00:03:28,450 --> 00:03:35,170
dare uno stile alla nostra intestazione e inizierò con l'intestazione stessa, aggiungendo un prop di intestazione e quindi questo oggetto

41
00:03:35,170 --> 00:03:40,810
conterrà queste definizioni di stile per l'intestazione, quindi per questo componente di visualizzazione qua e là di

42
00:03:40,810 --> 00:03:46,960
ovviamente, sei libero di sperimentare ciò che vuoi. Vado con una larghezza del 100% in modo

43
00:03:47,080 --> 00:03:53,470
che ci vuole la larghezza del dispositivo completa che possiamo ottenere o l'intera larghezza del componente padre per essere precisi,

44
00:03:53,470 --> 00:03:58,810
ma lo aggiungerò in modo tale che il componente padre occupi l'intera larghezza del dispositivo e quindi

45
00:03:58,840 --> 00:04:05,040
, questo richiederà anche l'intera larghezza del dispositivo alla fine. Assegna un'altezza e lì, puoi sperimentare

46
00:04:05,040 --> 00:04:10,020
valori diversi, ho trovato 90 abbastanza decenti e quindi ci proverò.

47
00:04:10,020 --> 00:04:16,500
Nota a margine, per ora ottimizzerò per queste schermate che ho qui, nel prossimo modulo del corso, approfondiremo come

48
00:04:16,500 --> 00:04:23,610
puoi regolare le tue visualizzazioni e il tuo codice per diversi dispositivi, sia per quanto riguarda le dimensioni che per quanto

49
00:04:23,610 --> 00:04:30,690
riguarda la piattaforma il tuo codice è in esecuzione. Per ora, non avremo alcuna differenziazione lì, ci adegueremo

50
00:04:30,690 --> 00:04:37,640
anche nella nostra app per avere un bell'aspetto su questi due emulatori ma, di nuovo, riprenderò più avanti.

51
00:04:37,830 --> 00:04:45,900
Quindi un'altezza di 90, un'imbottitura in cima a 36 per avere un po 'di spazio in alto e

52
00:04:45,900 --> 00:04:53,130
devo aggiungere questo per far fronte sostanzialmente o cose come la barra di stato qui o

53
00:04:53,160 --> 00:05:00,200
questa tacca qui, quindi quindi aggiungo questa parte superiore e voglio anche per aggiungere un colore

54
00:05:00,360 --> 00:05:04,760
di sfondo qui e ora sei ovviamente completamente libero

55
00:05:04,770 --> 00:05:13,350
di scegliere qualsiasi colore desideri, ho preparato un bel colore, un codice esadecimale di un colore che mi piace personalmente

56
00:05:13,380 --> 00:05:21,450
e che è # f7287b che è un bel colore nel mio opinione come vedrai tra un secondo.

57
00:05:21,460 --> 00:05:27,250
Ora voglio anche centrare il titolo e, quindi, userò allineare gli elementi e justifyContent perché

58
00:05:27,340 --> 00:05:33,280
ogni vista per impostazione predefinita usa flexbox e quindi con allineare gli elementi e justifyContent, possiamo

59
00:05:33,280 --> 00:05:39,610
controllare come gli elementi figlio della vista sono posizionati all'interno della vista e con il centro per

60
00:05:39,640 --> 00:05:40,780
allineare gli

61
00:05:40,780 --> 00:05:48,010
elementi e giustificare Il contenuto impostato anche al centro, centriamo tutti gli elementi figlio o figlio all'interno della vista al

62
00:05:48,010 --> 00:05:50,680
centro, sia in orizzontale che in verticale.

63
00:05:50,680 --> 00:05:52,480
Ora per il titolo

64
00:05:52,480 --> 00:05:55,640
dell'intestazione, voglio anche impostare alcuni stili per questo.

65
00:05:55,780 --> 00:06:05,230
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

66
00:06:05,260 --> 00:06:11,020
testo e voglio impostare la dimensione del carattere su 18 diciamo, in modo da avere questo

67
00:06:11,050 --> 00:06:18,500
fisso, un po ' dimensione del carattere maggiore qui. Detto questo, proviamo a usare questa

68
00:06:18,620 --> 00:06:26,550
intestazione e usiamola nell'app. file js qui. Lì abbiamo questa

69
00:06:26,560 --> 00:06:31,070
vista e questa vista non ha stile.

70
00:06:31,150 --> 00:06:38,050
Lo cambierò e imposterò una schermata qui e fornirò un attributo flessibile.

71
00:06:38,050 --> 00:06:44,090
Ora possiamo assegnarlo qui e fletterne uno assicurerà che questa vista occupi tutto lo spazio che può

72
00:06:44,140 --> 00:06:49,780
ottenere e poiché è la vista radice della nostra applicazione, ciò significa che prenderà tutta

73
00:06:49,780 --> 00:06:56,770
la larghezza e l'altezza che può ottenere, occuperà tutto schermo e quindi poiché la mia intestazione ha una larghezza del

74
00:06:56,770 --> 00:07:03,730
100%, poiché la aggiungerò direttamente all'interno di questa vista, che è ora configurata per assumere l'intera larghezza e altezza,

75
00:07:03,730 --> 00:07:06,360
questa intestazione prenderà anche l'intera larghezza.

76
00:07:06,370 --> 00:07:08,440
Quindi ora dobbiamo solo aggiungere l'intestazione,

77
00:07:08,440 --> 00:07:12,480
ovviamente, quindi importare l'intestazione da. / components / header, puoi

78
00:07:12,580 --> 00:07:20,020
omettere l'estensione del file e quindi aggiungere semplicemente l'intestazione come tag autochiudente qui, ma non dimenticare di impostare un oggetto titolo

79
00:07:20,020 --> 00:07:25,120
perché ricorda che qui stiamo proponendo il titolo oggetto tra i tag testo, quindi

80
00:07:25,570 --> 00:07:33,120
noi posso aggiungere un titolo qui e lo nominerò indovinare un numero perché è di questo che tratta il nostro gioco.

81
00:07:33,120 --> 00:07:39,210
Ora se lo salviamo, dovrebbe essere ricostruito automaticamente e dovresti vedere un'intestazione simile a questa sull'iPhone e come questa qui su

82
00:07:39,240 --> 00:07:45,900
Android e direi che va bene per entrambi i dispositivi. Ancora una volta, esploreremo in seguito i modi

83
00:07:46,290 --> 00:07:52,320
in cui è possibile ottimizzare l'aspetto del dispositivo specifico su cui è in esecuzione l'app.