1
00:00:02,470 --> 00:00:09,580
Sostituiamo il contenuto fittizio delle categorie qui con una griglia di categorie perché questa è l'idea dietro

2
00:00:09,580 --> 00:00:13,090
questa schermata dopo tutto. Ora, per quello, possiamo

3
00:00:13,090 --> 00:00:18,140
usare un componente che abbiamo usato prima e che è la FlatList.

4
00:00:18,160 --> 00:00:20,980
Finora, l'abbiamo usato per elenchi normali, in realtà

5
00:00:20,980 --> 00:00:25,490
puoi anche renderizzare le griglie con esso ed è esattamente quello che faremo qui.

6
00:00:25,730 --> 00:00:34,960
Ora per quello in questa schermata di categoria, sostituirò tutto con FlatList qui e visualizzerò solo il mio elenco piatto qui in questa schermata che restituisco

7
00:00:34,960 --> 00:00:35,530
alla

8
00:00:35,530 --> 00:00:42,520
fine e imposterò num colonne qui che è una nuova proprietà che non abbiamo mai visto prima a 2

9
00:00:42,520 --> 00:00:47,950
e questo definisce quante colonne vogliamo avere. Il valore predefinito è 1, che è un

10
00:00:47,950 --> 00:00:53,610
elenco normale ma puoi avere più di una colonna e questo ti dà una griglia in modo efficace.

11
00:00:53,620 --> 00:00:55,080
Ora, con ciò, potremmo rendere

12
00:00:55,090 --> 00:00:57,070
una griglia ma ovviamente abbiamo bisogno di alcuni

13
00:00:57,070 --> 00:00:59,640
dati per questo, altrimenti è difficile renderizzare una griglia, giusto?

14
00:01:00,590 --> 00:01:06,290
Per questo, aggiungerò una nuova cartella che nominerò i dati e lì, aggiungerò un dato fittizio. js file perché alla fine, sono

15
00:01:06,290 --> 00:01:10,040
solo alcuni dati fittizi che sto fornendo qui, non stiamo

16
00:01:10,040 --> 00:01:16,740
caricando questo da un server o qualcosa del genere in questo momento, invece caricalo in questo modo.

17
00:01:16,920 --> 00:01:23,340
Voglio avere un sacco di categorie lì dentro e per questo, aggiungerò ancora un'altra cartella che nomina i modelli che

18
00:01:23,520 --> 00:01:29,550
è alla fine una cartella in cui voglio definire come i miei dati sono modellati in questa app, come

19
00:01:29,550 --> 00:01:30,440
appare .

20
00:01:30,450 --> 00:01:36,810
Quindi, possiamo aggiungere una categoria. js file per esempio e in questo

21
00:01:36,840 --> 00:01:43,920
file, tutto quello che voglio avere è una classe che nominerò categoria e le classi sono funzioni Javascript predefinite

22
00:01:44,040 --> 00:01:52,800
nel Javascript moderno che esporto e lì definirò semplicemente come dovrebbe apparire un oggetto categoria nella mia applicazione in modo che in pratica

23
00:01:52,920 --> 00:01:59,110
abbiamo un modo più semplice di creare questi oggetti senza errori di digitazione e così via.

24
00:01:59,130 --> 00:02:05,670
Quindi qui, questa classe di categoria prenderà un costruttore e puoi usare questo costruttore che è un metodo predefinito

25
00:02:05,700 --> 00:02:06,610
che puoi

26
00:02:06,630 --> 00:02:11,790
aggiungere a qualsiasi classe in Javascript per inizializzare un oggetto basato su questa classe.

27
00:02:12,000 --> 00:02:16,350
Puoi farlo aspettandomi alcuni argomenti qui nel costruttore e per una categoria, voglio ottenere un ID

28
00:02:16,350 --> 00:02:22,200
per la categoria, un titolo e un colore che userò come colore di sfondo nella griglia per questo elemento della griglia per

29
00:02:22,200 --> 00:02:23,880
questa categoria e memorizzerò tutti

30
00:02:24,060 --> 00:02:29,460
questi dati in proprietà con l'aiuto di questa parola chiave. Nel caso in cui questo sia

31
00:02:29,460 --> 00:02:35,670
totalmente nuovo per te, immergiti sicuramente in alcuni corsi o risorse Javascript prima perché non ha

32
00:02:35,670 --> 00:02:38,550
nulla a che fare con la navigazione React

33
00:02:38,580 --> 00:02:42,470
o con React Native, questo è Javascript moderno alla vaniglia.

34
00:02:42,480 --> 00:02:44,470
Ora perché l'ho creato?

35
00:02:44,490 --> 00:02:52,650
Perché ora posso importare la mia classe di categoria dalla cartella dei modelli, dalla categoria. file js nel file di dati fittizi e

36
00:02:52,650 --> 00:02:56,460
quindi utilizzarlo per creare alcuni dati fittizi.

37
00:02:56,460 --> 00:03:04,650
Ora trovi quei dati fittizi allegati, in allegato trovi il file Javascript con queste categorie fittizie che conservo

38
00:03:04,860 --> 00:03:09,070
in una costante che esporto come esportazione denominata qui.

39
00:03:09,240 --> 00:03:14,200
Questi sono alcuni dati fittizi per le categorie in questa app, in queste categorie

40
00:03:14,520 --> 00:03:19,290
che voglio avere in questa app. Queste sono le categorie che userò in questa

41
00:03:19,290 --> 00:03:25,590
app e queste sono le categorie che ora possiamo quindi usare all'interno dei nostri schermi, nella schermata delle categorie per essere precisi.

42
00:03:26,540 --> 00:03:37,110
Quindi, lì dentro, voglio aggiungere un'importazione e importare categorie da dati / dati fittizi, quindi è importare quella costante

43
00:03:37,120 --> 00:03:40,640
denominata che stiamo esportando lì.

44
00:03:40,660 --> 00:03:44,020
Ora questo è un array di oggetti Javascript alla fine, giusto?

45
00:03:44,050 --> 00:03:45,610
Questo è ciò che abbiamo archiviato

46
00:03:45,640 --> 00:03:51,850
lì, è solo una matrice di oggetti Javascript che ora possiamo usare per rendere il nostro elenco o, per essere precisi, la

47
00:03:51,850 --> 00:03:53,090
nostra griglia qui.

48
00:03:53,170 --> 00:04:01,240
Quindi i dati per questo FlatList sono semplicemente i miei array di categorie, quindi mi limiterò a indicare le categorie

49
00:04:01,240 --> 00:04:08,510
e ovviamente ora abbiamo anche bisogno di render item per definire come dovrebbe essere renderizzato un singolo elemento

50
00:04:08,510 --> 00:04:15,380
della griglia, quale componente dovrebbe essere renderizzato lì. Per questo, aggiungerò una nuova funzione qui, render elemento

51
00:04:15,380 --> 00:04:22,580
della griglia che è una funzione che riceverà alcuni dati dell'articolo alla fine qui e che dovrebbe restituire

52
00:04:22,580 --> 00:04:25,460
un elemento jsx, dovrebbe restituire un

53
00:04:25,460 --> 00:04:33,950
componente React qui e indicherò la griglia di rendering oggetto qui. Ora lì, renderò una vista e per semplificare le cose, per ora questa sarà una vista con

54
00:04:33,950 --> 00:04:40,160
un testo lì dentro e in quel testo, voglio renderizzare ItemData.

55
00:04:40,160 --> 00:04:42,400
oggetto, questo è ciò che abbiamo

56
00:04:42,410 --> 00:04:48,250
disponibile su una FlatList se ricordi moduli precedenti, l'oggetto dati articolo qui ha una proprietà item, React

57
00:04:48,250 --> 00:04:55,520
Native FlatList ti dà questa proprietà e lì dentro avremo una proprietà title perché un oggetto che stiamo arrivare qui è

58
00:04:55,520 --> 00:05:01,940
solo una categoria che stiamo ottenendo dai nostri dati che stiamo inserendo nella FlatList, quindi avremo un tale oggetto

59
00:05:01,970 --> 00:05:05,490
Javascript come un elemento lì e questo oggetto Javascript è

60
00:05:05,630 --> 00:05:12,000
basato sul nostro modello qui e lì abbiamo impostato un titolo, un colore e una proprietà ID, quindi

61
00:05:12,040 --> 00:05:12,820
abbiamo

62
00:05:12,980 --> 00:05:19,160
una proprietà del titolo, quindi possiamo estrarre il titolo qui in questo modo, useremo il colore in seguito.

63
00:05:20,250 --> 00:05:22,010
Quindi questa è

64
00:05:22,080 --> 00:05:26,850
la prima cosa, dovrebbe funzionare. Ora nelle nuove versioni di

65
00:05:26,850 --> 00:05:35,340
React Native, non è inoltre necessario informare React Native che il proprio ID non è un nome chiave ma in realtà è un

66
00:05:35,400 --> 00:05:42,270
nome ID perché le versioni più recenti di React Native accettano l'ID come ID anche sui dati dell'elenco.

67
00:05:42,270 --> 00:05:48,300
Se seguissi una versione precedente, dovresti aggiungere qui un estrattore di chiavi che è una funzione che ottiene

68
00:05:48,630 --> 00:05:54,660
l'elemento e l'indice e deve restituire il valore che dovrebbe essere usato come chiave, quindi in questo caso

69
00:05:54,720 --> 00:05:56,980
sarebbe essere oggetto. id, ancora una

70
00:05:57,030 --> 00:06:03,030
volta le versioni più recenti di React Native non hanno bisogno di questo, ma solo per riferimento e per

71
00:06:03,030 --> 00:06:05,150
le versioni precedenti, aggiungerò ancora qui.

72
00:06:05,160 --> 00:06:08,610
Quindi ora restituiamo la nostra FlatList qui con i nostri dati.

73
00:06:08,610 --> 00:06:11,930
Se ora salviamo questo, dovremmo già vedere i nostri

74
00:06:11,940 --> 00:06:15,320
dati qui, ovviamente non proprio così belli ma una griglia,

75
00:06:15,330 --> 00:06:16,960
abbiamo italiano, accanto ad

76
00:06:17,040 --> 00:06:20,000
esso hamburger facili e veloci, accanto ad esso

77
00:06:20,130 --> 00:06:23,690
tedesco, non sembra proprio una griglia ma tecnicamente lo è.

78
00:06:24,030 --> 00:06:32,250
Ora, per renderlo un po 'più simile a una griglia, ovviamente dobbiamo aggiungere più stile. Ora per cambiare un po 'quello stile, possiamo andare qui ai

79
00:06:32,250 --> 00:06:33,080
nostri elementi

80
00:06:33,090 --> 00:06:40,830
della griglia, a un singolo elemento della griglia e aggiungere qui il puntello di stile e aggiungere lo stile dell'elemento della griglia o

81
00:06:40,830 --> 00:06:42,620
qualunque cosa tu voglia nominarlo

82
00:06:43,430 --> 00:06:50,700
e poi laggiù, aggiungerò griglia elemento sul mio foglio di stile e dare questa proprietà di flex, vogliamo prendere tutto lo

83
00:06:50,700 --> 00:06:52,250
spazio che può ottenere,

84
00:06:53,390 --> 00:06:57,530
salvarlo, ora questo sembra già un po 'più simile a una griglia.

85
00:06:57,530 --> 00:07:00,640
Ora anche un certo margine attorno a ciascun elemento

86
00:07:00,650 --> 00:07:08,450
sarebbe bello, quindi per questo possiamo solo aggiungere un margine e forse aggiungere 15 come margine attorno a ciascun elemento, in modo

87
00:07:08,450 --> 00:07:10,070
da avere più spazio

88
00:07:10,070 --> 00:07:12,500
in tutte le direzioni e con ciò,

89
00:07:12,500 --> 00:07:18,080
ovviamente, non è poi così male ora possiamo anche cambiare l'aspetto generale e ad esempio dare

90
00:07:18,080 --> 00:07:24,230
ad ogni oggetto un'altezza di diciamo 150 ed è totalmente a voi quali valori scegliete lì, ma direi

91
00:07:24,230 --> 00:07:25,610
che è una griglia

92
00:07:25,610 --> 00:07:26,400
abbastanza

93
00:07:26,450 --> 00:07:31,310
bella, sicuramente non vince un premio di stile, ma stiamo andando nella giusta direzione.

94
00:07:32,920 --> 00:07:38,830
Ora, prima di finire lo styling di questo e abbiamo sicuramente ancora del lavoro da fare per

95
00:07:38,830 --> 00:07:44,950
quello, assicuriamoci di poter toccare questi elementi e poi torniamo alla schermata dei dettagli per quell'elemento specifico, quindi

96
00:07:45,090 --> 00:07:50,770
vediamo anche come possiamo in realtà impostare un titolo nell'intestazione in modo da avere un'idea

97
00:07:50,770 --> 00:07:52,780
migliore di dove siamo attualmente.