1 00:00:02,160 --> 00:00:08,820 Ora per visualizzare il nostro elenco di obiettivi, qui nella vista, voglio semplicemente produrre un paio di componenti di testo per ora in 2 00:00:08,820 --> 00:00:16,290 cui semplicemente stampo il mio obiettivo e per farlo, possiamo inserire un'espressione dinamica qui con singole parentesi graffe di apertura e chiusura e ora ci 3 00:00:16,290 --> 00:00:17,910 riferiamo agli obiettivi del corso, 4 00:00:18,390 --> 00:00:25,860 che è questa variabile che abbiamo ottenuto qui con la destrutturazione dell'array. Gli obiettivi del corso sono la nostra gamma di obiettivi e 5 00:00:25,860 --> 00:00:27,890 ora, proprio come in React normale, 6 00:00:28,110 --> 00:00:34,620 che è una differenziazione che non mi piace molto perché alla fine stiamo usando React normale, quindi proprio 7 00:00:34,800 --> 00:00:36,350 come lo sai 8 00:00:36,750 --> 00:00:43,590 da React per i progetti web, ora puoi mappare questo array di dati in un array di componenti con 9 00:00:43,590 --> 00:00:50,280 il metodo map, che è un normale metodo Javascript. Il metodo map utilizza una funzione che viene eseguita 10 00:00:50,280 --> 00:00:52,230 su ogni elemento dell'array, quindi 11 00:00:52,230 --> 00:00:53,180 qui otteniamo 12 00:00:53,190 --> 00:01:00,810 il nostro obiettivo e quindi deve restituire un nuovo componente qui. Anche in questo caso userò questa sintassi della funzione freccia 13 00:01:00,810 --> 00:01:07,230 in linea dove invece di avere parentesi graffe e poi restituire qualcosa, ometto le parentesi graffe e ometto 14 00:01:07,230 --> 00:01:11,340 la dichiarazione di ritorno, questa è una sintassi Javascript valida, restituirà 15 00:01:11,370 --> 00:01:13,980 anche tutto ciò che inserisco qui. 16 00:01:14,160 --> 00:01:17,740 Quello che voglio restituire è un componente di testo, quindi 17 00:01:17,880 --> 00:01:26,430 questo componente di testo che abbiamo importato da React Native e con questo, ora possiamo produrre il nostro obiettivo qui perché un obiettivo in corso gli obiettivi 18 00:01:26,430 --> 00:01:32,280 sarà solo un testo perché ciò che aggiungiamo agli obiettivi del corso è il obiettivo inserito e l'obiettivo inserito 19 00:01:32,280 --> 00:01:36,100 è ciò che otteniamo dall'inserimento di testo e questo è solo testo. 20 00:01:36,570 --> 00:01:42,210 Quindi qui, ora stiamo solo trasmettendo del testo e sto mappando tutti i miei obiettivi del corso in 21 00:01:42,390 --> 00:01:49,630 componenti di testo che verranno visualizzati in questa vista qui. E con ciò se salviamo questo, dovremmo già 22 00:01:49,720 --> 00:01:51,130 essere in 23 00:01:51,220 --> 00:01:59,260 grado di iniziare ad aggiungere alcuni obiettivi, quindi imparare React Native è una cosa che posso inserire qui, 24 00:01:59,260 --> 00:02:00,950 premere Aggiungi ed 25 00:02:01,050 --> 00:02:06,300 eccolo, impararlo per davvero e lo otteniamo anche se vuoi anche 26 00:02:06,300 --> 00:02:11,610 fare dei pancake, puoi farlo anche tu e ovviamente, questo funziona anche 27 00:02:11,980 --> 00:02:18,480 su iOS, impara React Native sul serio e, naturalmente, voglio ancora fare dei pancake. 28 00:02:18,550 --> 00:02:23,960 Quindi funziona e questo è il modo in cui possiamo produrre un elenco semplice e molto banale di elementi qui. 29 00:02:23,980 --> 00:02:29,830 Ora, ovviamente, questi articoli sembrano piuttosto noiosi, quindi forse possiamo applicare un po 'di stile 30 00:02:29,830 --> 00:02:33,120 lì per renderli migliori. Prima di farlo, tuttavia, ti 31 00:02:33,340 --> 00:02:36,680 preghiamo di notare che abbiamo un errore qui nel nostro terminale. 32 00:02:36,730 --> 00:02:41,350 Ora la nostra app funziona chiaramente, ma l'errore che stiamo ottenendo qui è che ogni bambino in un elenco 33 00:02:41,350 --> 00:02:46,190 dovrebbe avere un supporto chiave univoco e questa è una normale regola di React, nulla di specifico di React Native. 34 00:02:46,300 --> 00:02:52,930 In effetti, dovresti sempre, quando si associa questo a un elenco di widget, assegnare qui una chiave in modo che React sia in grado 35 00:02:52,930 --> 00:02:58,750 di aggiornare efficacemente questo elenco dietro le quinte, se necessario. Puoi farlo aggiungendo un oggetto chiave qui e quindi la 36 00:02:59,110 --> 00:03:01,730 chiave dovrebbe essere un identificatore univoco, per ora 37 00:03:01,780 --> 00:03:05,890 andiamo con l'obiettivo stesso che non è strettamente unico, potresti inserire lo stesso 38 00:03:05,890 --> 00:03:09,970 obiettivo con lo stesso testo due volte che ti darebbe un errore ma 39 00:03:10,240 --> 00:03:12,650 per ora supponiamo che tu non lo 40 00:03:12,670 --> 00:03:17,720 stia facendo, quindi possiamo usare l'obiettivo come chiave e se lo facciamo, ci libereremo di quell'avvertimento. 41 00:03:17,720 --> 00:03:21,850 Se ora ho imparato React Native, posso aggiungerlo senza errori. 42 00:03:21,850 --> 00:03:27,610 Ancora una volta se aggiungo lo stesso testo due volte, tecnicamente non ottengo nemmeno un errore qui, ma questo 43 00:03:27,610 --> 00:03:28,040 sarebbe 44 00:03:28,040 --> 00:03:32,170 sbagliato, eccolo qui, ecco l'errore perché ho due figli con la stessa chiave. 45 00:03:32,200 --> 00:03:35,650 Quindi, per ora supponiamo che tu non lo 46 00:03:35,770 --> 00:03:40,580 faccia, questa è la normale regola chiave che hai anche in React normale. 47 00:03:40,780 --> 00:03:46,210 Quindi supponiamo semplicemente che non inserisci lo stesso obiettivo due volte e continuiamo con lo stile di questi elementi 48 00:03:46,210 --> 00:03:48,910 perché in questo momento, non sembrano troppo eccitanti.