1 00:00:02,180 --> 00:00:06,770 Ora, ovviamente, qui sto usando una vista di scorrimento e hai imparato che una FlatList è migliore se 2 00:00:06,770 --> 00:00:10,160 hai un elenco in cui non sai quanti elementi ci saranno dentro. 3 00:00:10,190 --> 00:00:16,490 Ora per il nostro gioco, una vista di scorrimento andrà bene perché sì, non sappiamo quanti 4 00:00:16,490 --> 00:00:24,320 elementi ci saranno e teoricamente, per indovinare molto male, avremo circa 100 elementi lì dentro ma ciò accadrà quasi mai 5 00:00:24,380 --> 00:00:34,020 e pertanto, in genere, questo elenco non conterrà più di 10, 15, 20 elementi e quindi molto probabilmente questo non ci causerà mai problemi di 6 00:00:34,110 --> 00:00:38,480 prestazioni e l'utilizzo di una vista di scorrimento qui va assolutamente 7 00:00:38,520 --> 00:00:45,210 bene perché sì, è un elenco che contiene più elementi, supererà i nostri limiti dello schermo ma 8 00:00:45,450 --> 00:00:52,140 raramente sarà un elenco con molti elementi, non sarà mai un elenco con più di 100 elementi 9 00:00:52,140 --> 00:00:56,370 a causa del modo in cui funziona il nostro gioco. 10 00:00:56,370 --> 00:01:01,770 Quindi la vista di scorrimento andrebbe bene qui, ma nel caso in cui desideri ancora utilizzare una FlatList, lascia che 11 00:01:01,800 --> 00:01:03,050 ti mostri anche questo. 12 00:01:03,060 --> 00:01:08,460 Per questo, possiamo aggiungere FlatList qui e ciò ovviamente significa che dobbiamo importare FlatList da 13 00:01:08,460 --> 00:01:08,910 React 14 00:01:09,390 --> 00:01:13,020 Native, quindi qui, importerò FlatList in questo modo e con 15 00:01:13,020 --> 00:01:19,590 FlatList importato, hai imparato che FlatList prende un oggetto dati che punta al dati che si desidera inserire e 16 00:01:19,670 --> 00:01:22,630 nel nostro caso qui, che sarebbe il nostro 17 00:01:22,680 --> 00:01:31,710 array di ipotesi passate e che quindi si dispone di un oggetto di rendering che ti consente di produrre gli articoli per ogni articolo nei 18 00:01:31,860 --> 00:01:37,350 dati che stai inserendo, quindi componenti per ogni elemento nei dati e qui posso indicare 19 00:01:37,350 --> 00:01:38,250 l'elemento dell'elenco 20 00:01:38,250 --> 00:01:42,870 di rendering che dovrebbe essere chiamato. Ora in questo momento non 21 00:01:42,870 --> 00:01:48,390 funzionerà per un paio di ragioni. Per prima cosa, l'elemento dell'elenco di 22 00:01:48,750 --> 00:01:55,620 rendering prevede due valori, ma l'elemento di rendering qui su FlatList inoltrerà solo un elemento, ovvero i dati 23 00:01:55,620 --> 00:01:59,950 dell'articolo che contengono informazioni sull'indice e sull'elemento che stiamo per stampare. 24 00:01:59,970 --> 00:02:03,510 L'altra cosa che ci causerà problemi è la chiave. 25 00:02:03,540 --> 00:02:10,710 Potresti ricordare che FlatList prevede di ottenere oggetti nell'array in cui stai passando dove ogni oggetto ha una 26 00:02:10,740 --> 00:02:16,130 proprietà chiave che può estrarre e utilizzare come chiave per un rendering efficiente. 27 00:02:16,140 --> 00:02:21,880 Ora non abbiamo una matrice di oggetti qui, abbiamo una matrice di numeri e non funzionerà. 28 00:02:21,960 --> 00:02:28,680 Ora possiamo aggiungere un estrattore di chiavi qui a FlatList per sovrascriverne il valore predefinito, l'estrattore di chiavi assume una funzione che 29 00:02:28,770 --> 00:02:35,070 ottiene il nostro articolo alla fine e quindi dobbiamo dire a FlatList dove trovare la nostra chiave e, per impostazione 30 00:02:35,070 --> 00:02:38,170 predefinita, cerca l'oggetto. chiave o per oggetto. id, qui 31 00:02:38,280 --> 00:02:41,860 vogliamo dire che l'elemento stesso è la chiave. 32 00:02:42,090 --> 00:02:46,580 Ora FlatList vuole una chiave che sia una stringa e non un 33 00:02:46,590 --> 00:02:48,510 numero, altrimenti riceverà un avviso. 34 00:02:48,510 --> 00:02:54,480 Quindi la prossima cosa che dobbiamo fare è che le ipotesi passate che stiamo gestendo dovrebbero essere stringhe e questo non 35 00:02:54,480 --> 00:02:58,800 è un problema perché le stiamo usando solo per stamparle sullo schermo, quindi non ci 36 00:02:58,800 --> 00:03:03,750 interessa davvero se sono tecnicamente memorizzato come numero o come stringa e quindi qui quando aggiungiamo una 37 00:03:03,750 --> 00:03:09,630 nuova ipotesi, possiamo semplicemente chiamare toString che è un metodo Javascript incorporato sul numero per convertirlo in un tipo di 38 00:03:09,630 --> 00:03:16,490 stringa e fare lo stesso per il valore iniziale di corso. Qui dove aggiungo la mia ipotesi iniziale, chiama 39 00:03:16,500 --> 00:03:19,140 anche a String lì e ora 40 00:03:19,140 --> 00:03:26,030 abbiamo stringhe e possono quindi essere usate come numeri. Ora, come ho detto, l'elemento dell'elenco di rendering si 41 00:03:26,030 --> 00:03:31,940 aspetta argomenti sbagliati, numOfRound non funzionerà in questo modo, anche il valore non funzionerà in questo 42 00:03:31,940 --> 00:03:34,430 modo, invece stiamo ottenendo i dati 43 00:03:34,550 --> 00:03:42,440 dell'articolo e possiamo comunque aspettarci un argomento in più, questo tuttavia deve essere previsto come primo argomento perché ora possiamo semplicemente andare 44 00:03:42,740 --> 00:03:49,280 giù per rendere l'elemento qui sulla FlatList e associare gli argomenti che dovrebbero essere passati, quindi possiamo aggiungere 45 00:03:49,460 --> 00:03:55,330 altri argomenti oltre all'argomento predefinito che verrà passato. Ora bind si aspetta che questo sia il primo argomento in 46 00:03:55,350 --> 00:04:00,210 modo da impostare ciò a cui questo dovrebbe fare riferimento nella funzione che chiamiamo, non ci interessa qui quindi 47 00:04:00,210 --> 00:04:00,920 lo aggiungerò 48 00:04:00,920 --> 00:04:03,720 solo a questo, potresti anche impostarlo su null, esso non importa. 49 00:04:03,750 --> 00:04:10,350 Il secondo argomento che aggiungeremo qui sarà il primo argomento ricevuto da quella 50 00:04:10,350 --> 00:04:14,830 funzione e quello dovrebbe essere il nostro numero circolare 51 00:04:14,860 --> 00:04:21,510 che dovrebbe essere PastGuesses. lunghezza. In precedenza, ho dedotto l'indice qui, ma non 52 00:04:21,510 --> 00:04:23,640 funziona più perché non ho più accesso 53 00:04:23,640 --> 00:04:27,430 all'indice, non stiamo mappando manualmente. Quindi passerò solo la lunghezza 54 00:04:27,700 --> 00:04:34,170 lì dentro e la cosa buona è che posso ottenere l'indice all'interno del rendering degli elementi dai dati dell'articolo. 55 00:04:34,170 --> 00:04:39,780 Questo argomento predefinito verrà inoltre passato da React e l'argomento predefinito verrà automaticamente passato 56 00:04:39,840 --> 00:04:40,960 all'ultimo argomento. 57 00:04:41,010 --> 00:04:43,890 Quindi i primi argomenti saranno gli argomenti che hai 58 00:04:43,890 --> 00:04:45,840 impostato in bind, in questo 59 00:04:45,830 --> 00:04:52,620 caso, questo è solo un argomento, il nostro numero di round o la nostra lunghezza dell'array e quindi qualsiasi argomento predefinito 60 00:04:52,620 --> 00:04:58,500 che sarebbe stato passato normalmente verrà aggiunto come argomento aggiuntivo alla fine del tuo elenco di argomenti qui. 61 00:04:58,500 --> 00:05:01,500 Ora qui, anche il numero di round 62 00:05:01,500 --> 00:05:07,530 non è più un nome adatto, invece è la lunghezza dell'elenco, che sembra un nome 63 00:05:07,580 --> 00:05:13,970 migliore perché è quello che stiamo ottenendo, ma qui possiamo calcolare il nostro numero di round 64 00:05:13,970 --> 00:05:20,120 utilizzando la lunghezza dell'elenco e quindi deducendo itemData. indice perché i dati dell'articolo che ricevi automaticamente da React Native sono un oggetto 65 00:05:20,120 --> 00:05:27,440 che ha anche una proprietà index che è l'indice dell'articolo che stai producendo e ottieni anche ItemData. oggetto e questo è l'oggetto 66 00:05:27,920 --> 00:05:31,740 stesso che nel nostro caso è l'ipotesi. 67 00:05:32,000 --> 00:05:37,700 Inoltre, ora non è più necessario aggiungere una chiave qui perché tale codifica verrà eseguita da 68 00:05:37,700 --> 00:05:41,740 React Native grazie a FlatList. Quindi è stato un sacco di lavoro, ora 69 00:05:41,750 --> 00:05:43,940 dovremmo essere in grado di produrre di nuovo un elenco. 70 00:05:43,940 --> 00:05:46,590 Quindi salviamo questo e proviamo qui 71 00:05:46,590 --> 00:05:48,860 e sembra che funzioni, 72 00:05:49,320 --> 00:05:55,440 tuttavia ovviamente abbiamo perso il posizionamento ora. In precedenza ciò che abbiamo fatto è stato aggiungere lo stile del 73 00:05:55,440 --> 00:05:58,300 contenitore di contenuti, l'elenco degli stili qui alla vista di 74 00:05:58,320 --> 00:06:04,200 scorrimento, la cosa buona è che puoi farlo anche sulla FlatList. Sebbene sia possibile aggiungere uno stile proprio come nella 75 00:06:04,200 --> 00:06:10,320 vista di scorrimento, questo stile consente ad esempio di aggiungere un margine attorno all'elenco ma non consente di allineare il 76 00:06:10,320 --> 00:06:12,510 contenuto all'interno dell'elenco. Per questo, 77 00:06:12,510 --> 00:06:16,900 invece, usa lo stile del contenitore di contenuti che è supportato anche da FlatList 78 00:06:16,980 --> 00:06:22,200 e quindi qui, possiamo anche puntare all'elenco degli stili e quindi questo dovrebbe ora funzionare come la 79 00:06:22,200 --> 00:06:23,750 nostra vista di scorrimento prima. 80 00:06:23,760 --> 00:06:32,650 Quindi proviamo e vedremo che iniziamo dal basso qui e ora possiamo iniziare ad aggiungere elementi. 81 00:06:32,650 --> 00:06:35,390 Ora vediamo se lo scorrimento funziona anche 82 00:06:36,050 --> 00:06:39,820 come dovrebbe, sì lo fa e possiamo vedere l'ultimo elemento e l'elemento 83 00:06:39,950 --> 00:06:43,400 più vecchio e sì c'è qualcosa di sbagliato nel posizionamento degli 84 00:06:43,420 --> 00:06:49,010 elementi nell'elenco e tornerò a questo ma generalmente funziona. Proviamo anche su Android, quindi iniziamo 85 00:06:49,010 --> 00:06:50,130 a indovinare 86 00:06:50,150 --> 00:06:54,610 e speriamo di non risolverlo troppo presto, no, che funziona 87 00:06:54,630 --> 00:06:55,740 e 88 00:06:55,740 --> 00:07:02,200 qui, possiamo anche scorrere come puoi vedere. In modo che funzioni anche con FlatList, ora 89 00:07:02,200 --> 00:07:08,160 che ne dici di questa strana distribuzione di contenuti qui nelle nostre voci di elenco? 90 00:07:08,170 --> 00:07:15,070 Bene noterai che le voci dell'elenco sono più grandi di prima. 91 00:07:15,160 --> 00:07:21,010 Il contenuto è distribuito come se la voce dell'elenco finisse qui e questo è davvero il problema. 92 00:07:21,010 --> 00:07:27,910 Abbiamo una larghezza del 60% sulla voce di elenco e il nostro contenuto lo rispetta, ma i nostri 93 00:07:27,910 --> 00:07:29,510 confini stranamente no. 94 00:07:29,590 --> 00:07:34,870 Per risolvere questo strano comportamento di FlatList, quello che puoi fare è andare al contenitore della tua 95 00:07:34,870 --> 00:07:41,110 lista che contiene l'elenco generale e impostare la larghezza lì alla larghezza della tua lista desiderata alla fine, come diciamo 96 00:07:41,860 --> 00:07:45,810 60% e dare una larghezza agli elementi della tua lista del 100%. 97 00:07:45,820 --> 00:07:52,300 Quindi ora il contenitore dell'elenco in generale è più piccolo, è meno ampio e quindi gli elementi dell'elenco assumono quella larghezza 98 00:07:52,300 --> 00:07:53,850 e hanno la stessa 99 00:07:53,950 --> 00:07:58,840 larghezza e poiché raramente è necessario utilizzare il caso in cui il contenitore dell'elenco deve 100 00:07:59,230 --> 00:08:04,150 essere più largo degli elementi dell'elenco perché cos'altro sarebbe nel contenitore dell'elenco, dovrebbe essere un'ottima soluzione. 101 00:08:04,180 --> 00:08:11,300 Ora, se lo fai, noterai che la larghezza sembra migliore ma in realtà, il posizionamento ora è un problema. 102 00:08:11,320 --> 00:08:17,080 Bene, dato che ora abbiamo la larghezza controllata sul contenitore dell'elenco esterno, possiamo sbarazzarci di allineare 103 00:08:17,080 --> 00:08:20,740 il centro degli elementi qui nell'elenco stesso, quindi l'elenco, 104 00:08:20,740 --> 00:08:25,760 non dimenticare, è stato lo stile aggiunto allo stile del contenitore di contenuti. 105 00:08:25,810 --> 00:08:30,810 Manteniamo lo stile lì ma ho rimosso allineare gli oggetti al centro perché non 106 00:08:31,060 --> 00:08:35,050 c'è nulla da centrare ora, abbiamo la larghezza impostata sul contenitore 107 00:08:35,050 --> 00:08:41,890 dell'elenco e non sugli elementi dell'elenco, quindi grazie a loro che hanno il 100%, sono centrati automaticamente perché prendono 108 00:08:41,890 --> 00:08:45,070 comunque su tutta la larghezza e quindi 109 00:08:45,070 --> 00:08:52,420 ora se ci proviamo di nuovo, sembra che funzioni meglio e che gli elementi dell'elenco siano effettivamente disposti come dovrebbero essere. 110 00:08:52,420 --> 00:08:57,940 Quindi, se ne abbiamo un altro qui che forse impiega un po 'più di tempo, sì, sembra 111 00:08:57,940 --> 00:09:04,230 buono, allora qui possiamo vedere che abbiamo lo stesso comportamento di prima, otteniamo lo stile piacevole e abbiamo anche 112 00:09:04,240 --> 00:09:09,760 aggirato quel comportamento diverso che FlatList ci dà. Proviamo anche qui su Android e iniziamo un 113 00:09:09,760 --> 00:09:10,930 nuovo gioco lì, 114 00:09:12,670 --> 00:09:14,290 oh, questo non sarà un 115 00:09:16,120 --> 00:09:17,020 gioco lungo, 116 00:09:17,020 --> 00:09:19,800 abbastanza lungo, quindi anche lì, tutto funziona come dovrebbe. 117 00:09:19,960 --> 00:09:25,780 Ed è così che potresti farlo con FlatList, poiché vedi che funziona in modo leggermente diverso, dobbiamo aggirare 118 00:09:25,780 --> 00:09:27,600 il suo diverso comportamento lì quando 119 00:09:27,610 --> 00:09:33,550 si tratta di regolare la larghezza degli elementi dell'elenco ma alla fine, alla fine, ora funziona anche e 120 00:09:34,090 --> 00:09:40,330 quindi ora hai imparato come organizzare le tue cose con FlatList, con vista di scorrimento, cosa c'è di speciale 121 00:09:40,330 --> 00:09:46,990 in queste viste di elenco o in quelle viste scorrevoli in generale e come puoi ancora strutturare le tue cose nel 122 00:09:46,990 --> 00:09:47,970 modo desiderato.