1
00:00:02,430 --> 00:00:05,640
Quindi iniziamo a lavorare su questa app quindi e per

2
00:00:05,760 --> 00:00:08,270
questo, ho una nuovissima app qui, la

3
00:00:08,280 --> 00:00:12,390
troverai allegata nel caso in cui desideri costruire su questa stessa app iniziale.

4
00:00:12,420 --> 00:00:19,020
Questa semplice app ci dà questo qui, un'app molto brutta in cui abbiamo del testo che è sovrapposto

5
00:00:19,020 --> 00:00:21,440
dalla barra di stato, dalla tacca.

6
00:00:21,450 --> 00:00:26,800
Ora potremmo risolvere il problema con la visualizzazione dell'area di salvataggio come hai imparato in precedenza, ma non

7
00:00:26,820 --> 00:00:33,210
sarà necessario perché non terremo comunque questi contenuti e utilizzeremo una libreria di terze parti che ci consente di navigare facilmente

8
00:00:33,210 --> 00:00:36,530
tra schermate diverse e ottenere simpatiche animazioni lungo la strada, in

9
00:00:36,690 --> 00:00:38,310
modo che non ci dobbiamo

10
00:00:38,310 --> 00:00:44,610
preoccupare di questo e questa libreria di terze parti gestirà anche la tacca sul dispositivo e ci darà questa area di

11
00:00:44,610 --> 00:00:45,880
salvataggio pronta all'uso.

12
00:00:45,900 --> 00:00:52,230
Ora prima di aggiungere quella libreria di terze parti, iniziamo a scrivere un po 'di codice perché

13
00:00:52,230 --> 00:00:56,020
possiamo navigare tra le schermate solo se abbiamo più schermate.

14
00:00:56,040 --> 00:01:01,950
Quindi, creerò una nuova cartella di schermate qui e creerò anche una cartella di

15
00:01:01,950 --> 00:01:07,830
componenti, la differenza sarà che nella cartella delle schermate abbiamo questi componenti di

16
00:01:07,860 --> 00:01:15,420
React che poi utilizzeremo come schermate complete invece nella cartella dei componenti, avremo i componenti che utilizziamo sui

17
00:01:15,420 --> 00:01:16,430
nostri schermi,

18
00:01:16,440 --> 00:01:23,280
quindi ad esempio quando abbiamo quella griglia di categorie di pasti, di categorie di alimenti, il

19
00:01:23,280 --> 00:01:30,200
nostro elemento della griglia sarebbe un componente, l'intera griglia, le intere categorie di alimenti lo schermo tuttavia

20
00:01:30,450 --> 00:01:37,530
sarebbe uno schermo e immagino che abbia senso. Ora come abbozzato, come disposto, in questa app avremo bisogno di un paio di schermate e

21
00:01:37,530 --> 00:01:43,860
creerò già tutti i file e ovviamente li riempiremo di vita in questo modulo. Avremo bisogno della schermata delle categorie

22
00:01:43,890 --> 00:01:49,440
e nominerò la schermata delle categorie di file per chiarire cosa c'è

23
00:01:49,440 --> 00:01:50,200
dentro.

24
00:01:50,250 --> 00:01:57,270
Questa è la schermata in cui possiamo selezionare una categoria come italiano, tedesco, americano, quindi dove possiamo selezionare

25
00:01:57,270 --> 00:02:04,170
una categoria di alimenti, quindi aggiungeremo contenuti che riflettono questo, aggiungeremo una griglia simile in questa schermata, in

26
00:02:04,230 --> 00:02:06,420
questa schermata componente più tardi.

27
00:02:06,420 --> 00:02:14,100
Ora una volta selezionata una categoria, vedremo un elenco di pasti che rientrano in questa categoria e nominerò questa schermata

28
00:02:14,100 --> 00:02:20,190
che vedremo, a cui andremo, schermata della categoria pasti perché questa è la schermata che

29
00:02:20,190 --> 00:02:23,390
carica i pasti per una categoria scelta.

30
00:02:23,460 --> 00:02:28,240
Quindi è un'altra schermata di cui abbiamo bisogno e un'altra schermata su cui saremo in grado di navigare.

31
00:02:28,320 --> 00:02:35,100
Ora avremo anche bisogno di una schermata dei preferiti che è la schermata che contiene tutte le nostre ricette preferite, i

32
00:02:35,100 --> 00:02:42,300
nostri pasti preferiti e avremo anche bisogno di una MealDetailScreen, questa è la schermata che vediamo se tocchiamo un singolo pasto all'interno

33
00:02:42,300 --> 00:02:48,390
di una categoria scelta o su lo schermo preferito. Questo quindi ci mostra gli ingredienti e

34
00:02:48,390 --> 00:02:51,120
i passaggi dettagliati per questo pasto.

35
00:02:51,120 --> 00:02:58,020
Ora e ultimo ma non meno importante, abbiamo bisogno di una schermata di filtri e questa schermata di filtri è la schermata

36
00:02:58,020 --> 00:03:05,700
che ci consente di impostare filtri, come cibo vegano in modo da vedere solo ricette che sono vegane o vegetariane o senza glutine o

37
00:03:05,790 --> 00:03:08,110
senza lattosio, queste saranno le quattro

38
00:03:08,130 --> 00:03:14,950
categorie che avrò in questa app, quindi queste sono le schermate. Ora aggiungeremo i componenti quando ne abbiamo bisogno

39
00:03:15,040 --> 00:03:18,410
e non aggiungeremo tutti i file in anticipo

40
00:03:18,430 --> 00:03:25,390
e, con ciò, abbiamo la configurazione di base di cui abbiamo bisogno qui, anche se ovviamente tutti

41
00:03:25,720 --> 00:03:31,330
i nostri schermi sono completamente vuoti. Ora li popoleremo con più vita passo dopo passo, ma

42
00:03:31,330 --> 00:03:34,160
almeno voglio impostare un componente di base in ciascuna di queste schermate.

43
00:03:34,390 --> 00:03:40,000
Quindi inizierò nella schermata delle categorie e, naturalmente, dobbiamo importare React da React lì perché

44
00:03:40,000 --> 00:03:46,750
costruiremo un componente React e importeremo anche qualcosa da React Native perché ovviamente costruiremo un componente React qui

45
00:03:47,050 --> 00:03:52,600
che utilizza alcuni componenti nativi di React. Per essere precisi, inizierò qui semplicemente e importerò

46
00:03:52,630 --> 00:03:58,110
una vista e un testo da React Native e quindi creerò il mio componente, la schermata delle

47
00:03:58,120 --> 00:04:04,630
categorie in questo caso che accetta oggetti di scena o che potrebbero ricevere oggetti di scena almeno perché è un normale

48
00:04:04,630 --> 00:04:11,530
componente React dopo tutto e dove esporterò questo come componente predefinito. Aggiungerò anche un foglio di stile perché è

49
00:04:11,530 --> 00:04:16,870
probabile che ne avremo bisogno e, in caso contrario, possiamo ancora eliminarlo in seguito.

50
00:04:16,870 --> 00:04:19,150
Quindi imposterò qui i miei stili con

51
00:04:19,150 --> 00:04:22,060
la creazione di fogli di stile, in questo modo.

52
00:04:22,330 --> 00:04:26,440
Quindi questo è un componente di React molto semplice, ma

53
00:04:26,440 --> 00:04:32,730
non rende nulla, quindi all'interno della funzione del componente qui, dovremo restituire qualcosa e quel qualcosa è

54
00:04:32,770 --> 00:04:39,920
un codice jsx dove voglio renderizzare una vista e lì dentro un testo e qui dico la schermata delle categorie.

55
00:04:40,240 --> 00:04:49,270
Ora darò anche a quel punto di vista uno stile in cui dico stili. schermo, con un layout dello schermo molto semplice o uno stile dello schermo

56
00:04:49,270 --> 00:04:56,260
qui in cui ho impostato la flessibilità su uno e quindi giustificare il contenuto al centro e allineare gli elementi

57
00:04:56,260 --> 00:04:58,980
al centro e, come hai appreso, questo

58
00:04:59,080 --> 00:05:04,850
farà una cosa, centrerà il contenuto sullo schermo, quindi centrerà questo testo sullo schermo alla fine.

59
00:05:04,960 --> 00:05:09,880
Questo è il componente di base e copierò quel contenuto in tutte le altre schermate e,

60
00:05:09,910 --> 00:05:14,920
naturalmente, questo non è il contenuto finale che avremo lì, solo alcuni contenuti fittizi in modo che

61
00:05:14,920 --> 00:05:19,210
possiamo iniziare a navigare tra alcune di queste schermate e vedere qualcosa .

62
00:05:19,210 --> 00:05:25,900
Quindi qui, abbiamo la schermata dei pasti di categoria, questo è questo componente qui ed è quindi quello di cui

63
00:05:25,900 --> 00:05:37,880
abbiamo bisogno per esportare qui e qui, quindi dirò la schermata dei pasti di categoria come questa. Ora aggiungerò anche questo alla schermata dei preferiti e lo rinominerò nella schermata dei

64
00:05:37,880 --> 00:05:41,650
preferiti e ovviamente esporterò la schermata dei preferiti

65
00:05:41,690 --> 00:05:43,700
qui e poi qui,

66
00:05:43,700 --> 00:05:45,000
posso dire

67
00:05:45,110 --> 00:05:48,720
la schermata dei preferiti, copiarla nella schermata dei

68
00:05:48,740 --> 00:05:53,060
filtri e fare la stessa cosa lì, è lo schermo

69
00:05:53,080 --> 00:05:55,920
dei filtri, l'ho rinominato e l'ho

70
00:05:55,940 --> 00:06:02,240
esportato e dico anche lo schermo dei filtri qui nel nostro testo e, ultimo

71
00:06:02,390 --> 00:06:06,110
ma non meno importante, questo è il MealDetailScreen.

72
00:06:06,110 --> 00:06:09,000
Quindi qui abbiamo MealDetailScreen,

73
00:06:09,740 --> 00:06:15,140
lo chiamerò anche MealDetailScreen qui ed esporterò MealDetailScreen.

74
00:06:15,140 --> 00:06:19,930
Quindi, con quello, abbiamo impostato tutto in queste schermate, ora abbiamo quasi finito

75
00:06:20,060 --> 00:06:23,390
con tutta la preparazione, voglio solo aggiungere alcuni

76
00:06:23,450 --> 00:06:29,240
caratteri speciali a questa app e, successivamente, ci immergeremo subito nell'aggiungere un po 'di navigazione.