Ora, ovviamente, qui sto usando una vista di scorrimento e hai imparato che una FlatList è migliore se
hai un elenco in cui non sai quanti elementi ci saranno dentro.
Ora per il nostro gioco, una vista di scorrimento andrà bene perché sì, non sappiamo quanti
elementi ci saranno e teoricamente, per indovinare molto male, avremo circa 100 elementi lì dentro ma ciò accadrà quasi mai
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
prestazioni e l'utilizzo di una vista di scorrimento qui va assolutamente
bene perché sì, è un elenco che contiene più elementi, supererà i nostri limiti dello schermo ma
raramente sarà un elenco con molti elementi, non sarà mai un elenco con più di 100 elementi
a causa del modo in cui funziona il nostro gioco.
Quindi la vista di scorrimento andrebbe bene qui, ma nel caso in cui desideri ancora utilizzare una FlatList, lascia che
ti mostri anche questo.
Per questo, possiamo aggiungere FlatList qui e ciò ovviamente significa che dobbiamo importare FlatList da
React
Native, quindi qui, importerò FlatList in questo modo e con
FlatList importato, hai imparato che FlatList prende un oggetto dati che punta al dati che si desidera inserire e
nel nostro caso qui, che sarebbe il nostro
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
dati che stai inserendo, quindi componenti per ogni elemento nei dati e qui posso indicare
l'elemento dell'elenco
di rendering che dovrebbe essere chiamato. Ora in questo momento non
funzionerà per un paio di ragioni. Per prima cosa, l'elemento dell'elenco di
rendering prevede due valori, ma l'elemento di rendering qui su FlatList inoltrerà solo un elemento, ovvero i dati
dell'articolo che contengono informazioni sull'indice e sull'elemento che stiamo per stampare.
L'altra cosa che ci causerà problemi è la chiave.
Potresti ricordare che FlatList prevede di ottenere oggetti nell'array in cui stai passando dove ogni oggetto ha una
proprietà chiave che può estrarre e utilizzare come chiave per un rendering efficiente.
Ora non abbiamo una matrice di oggetti qui, abbiamo una matrice di numeri e non funzionerà.
Ora possiamo aggiungere un estrattore di chiavi qui a FlatList per sovrascriverne il valore predefinito, l'estrattore di chiavi assume una funzione che
ottiene il nostro articolo alla fine e quindi dobbiamo dire a FlatList dove trovare la nostra chiave e, per impostazione
predefinita, cerca l'oggetto. chiave o per oggetto. id, qui
vogliamo dire che l'elemento stesso è la chiave.
Ora FlatList vuole una chiave che sia una stringa e non un
numero, altrimenti riceverà un avviso.
Quindi la prossima cosa che dobbiamo fare è che le ipotesi passate che stiamo gestendo dovrebbero essere stringhe e questo non
è un problema perché le stiamo usando solo per stamparle sullo schermo, quindi non ci
interessa davvero se sono tecnicamente memorizzato come numero o come stringa e quindi qui quando aggiungiamo una
nuova ipotesi, possiamo semplicemente chiamare toString che è un metodo Javascript incorporato sul numero per convertirlo in un tipo di
stringa e fare lo stesso per il valore iniziale di corso. Qui dove aggiungo la mia ipotesi iniziale, chiama
anche a String lì e ora
abbiamo stringhe e possono quindi essere usate come numeri. Ora, come ho detto, l'elemento dell'elenco di rendering si
aspetta argomenti sbagliati, numOfRound non funzionerà in questo modo, anche il valore non funzionerà in questo
modo, invece stiamo ottenendo i dati
dell'articolo e possiamo comunque aspettarci un argomento in più, questo tuttavia deve essere previsto come primo argomento perché ora possiamo semplicemente andare
giù per rendere l'elemento qui sulla FlatList e associare gli argomenti che dovrebbero essere passati, quindi possiamo aggiungere
altri argomenti oltre all'argomento predefinito che verrà passato. Ora bind si aspetta che questo sia il primo argomento in
modo da impostare ciò a cui questo dovrebbe fare riferimento nella funzione che chiamiamo, non ci interessa qui quindi
lo aggiungerò
solo a questo, potresti anche impostarlo su null, esso non importa.
Il secondo argomento che aggiungeremo qui sarà il primo argomento ricevuto da quella
funzione e quello dovrebbe essere il nostro numero circolare
che dovrebbe essere PastGuesses. lunghezza. In precedenza, ho dedotto l'indice qui, ma non
funziona più perché non ho più accesso
all'indice, non stiamo mappando manualmente. Quindi passerò solo la lunghezza
lì dentro e la cosa buona è che posso ottenere l'indice all'interno del rendering degli elementi dai dati dell'articolo.
Questo argomento predefinito verrà inoltre passato da React e l'argomento predefinito verrà automaticamente passato
all'ultimo argomento.
Quindi i primi argomenti saranno gli argomenti che hai
impostato in bind, in questo
caso, questo è solo un argomento, il nostro numero di round o la nostra lunghezza dell'array e quindi qualsiasi argomento predefinito
che sarebbe stato passato normalmente verrà aggiunto come argomento aggiuntivo alla fine del tuo elenco di argomenti qui.
Ora qui, anche il numero di round
non è più un nome adatto, invece è la lunghezza dell'elenco, che sembra un nome
migliore perché è quello che stiamo ottenendo, ma qui possiamo calcolare il nostro numero di round
utilizzando la lunghezza dell'elenco e quindi deducendo itemData. indice perché i dati dell'articolo che ricevi automaticamente da React Native sono un oggetto
che ha anche una proprietà index che è l'indice dell'articolo che stai producendo e ottieni anche ItemData. oggetto e questo è l'oggetto
stesso che nel nostro caso è l'ipotesi.
Inoltre, ora non è più necessario aggiungere una chiave qui perché tale codifica verrà eseguita da
React Native grazie a FlatList. Quindi è stato un sacco di lavoro, ora
dovremmo essere in grado di produrre di nuovo un elenco.
Quindi salviamo questo e proviamo qui
e sembra che funzioni,
tuttavia ovviamente abbiamo perso il posizionamento ora. In precedenza ciò che abbiamo fatto è stato aggiungere lo stile del
contenitore di contenuti, l'elenco degli stili qui alla vista di
scorrimento, la cosa buona è che puoi farlo anche sulla FlatList. Sebbene sia possibile aggiungere uno stile proprio come nella
vista di scorrimento, questo stile consente ad esempio di aggiungere un margine attorno all'elenco ma non consente di allineare il
contenuto all'interno dell'elenco. Per questo,
invece, usa lo stile del contenitore di contenuti che è supportato anche da FlatList
e quindi qui, possiamo anche puntare all'elenco degli stili e quindi questo dovrebbe ora funzionare come la
nostra vista di scorrimento prima.
Quindi proviamo e vedremo che iniziamo dal basso qui e ora possiamo iniziare ad aggiungere elementi.
Ora vediamo se lo scorrimento funziona anche
come dovrebbe, sì lo fa e possiamo vedere l'ultimo elemento e l'elemento
più vecchio e sì c'è qualcosa di sbagliato nel posizionamento degli
elementi nell'elenco e tornerò a questo ma generalmente funziona. Proviamo anche su Android, quindi iniziamo
a indovinare
e speriamo di non risolverlo troppo presto, no, che funziona
e
qui, possiamo anche scorrere come puoi vedere. In modo che funzioni anche con FlatList, ora
che ne dici di questa strana distribuzione di contenuti qui nelle nostre voci di elenco?
Bene noterai che le voci dell'elenco sono più grandi di prima.
Il contenuto è distribuito come se la voce dell'elenco finisse qui e questo è davvero il problema.
Abbiamo una larghezza del 60% sulla voce di elenco e il nostro contenuto lo rispetta, ma i nostri
confini stranamente no.
Per risolvere questo strano comportamento di FlatList, quello che puoi fare è andare al contenitore della tua
lista che contiene l'elenco generale e impostare la larghezza lì alla larghezza della tua lista desiderata alla fine, come diciamo
60% e dare una larghezza agli elementi della tua lista del 100%.
Quindi ora il contenitore dell'elenco in generale è più piccolo, è meno ampio e quindi gli elementi dell'elenco assumono quella larghezza
e hanno la stessa
larghezza e poiché raramente è necessario utilizzare il caso in cui il contenitore dell'elenco deve
essere più largo degli elementi dell'elenco perché cos'altro sarebbe nel contenitore dell'elenco, dovrebbe essere un'ottima soluzione.
Ora, se lo fai, noterai che la larghezza sembra migliore ma in realtà, il posizionamento ora è un problema.
Bene, dato che ora abbiamo la larghezza controllata sul contenitore dell'elenco esterno, possiamo sbarazzarci di allineare
il centro degli elementi qui nell'elenco stesso, quindi l'elenco,
non dimenticare, è stato lo stile aggiunto allo stile del contenitore di contenuti.
Manteniamo lo stile lì ma ho rimosso allineare gli oggetti al centro perché non
c'è nulla da centrare ora, abbiamo la larghezza impostata sul contenitore
dell'elenco e non sugli elementi dell'elenco, quindi grazie a loro che hanno il 100%, sono centrati automaticamente perché prendono
comunque su tutta la larghezza e quindi
ora se ci proviamo di nuovo, sembra che funzioni meglio e che gli elementi dell'elenco siano effettivamente disposti come dovrebbero essere.
Quindi, se ne abbiamo un altro qui che forse impiega un po 'più di tempo, sì, sembra
buono, allora qui possiamo vedere che abbiamo lo stesso comportamento di prima, otteniamo lo stile piacevole e abbiamo anche
aggirato quel comportamento diverso che FlatList ci dà. Proviamo anche qui su Android e iniziamo un
nuovo gioco lì,
oh, questo non sarà un
gioco lungo,
abbastanza lungo, quindi anche lì, tutto funziona come dovrebbe.
Ed è così che potresti farlo con FlatList, poiché vedi che funziona in modo leggermente diverso, dobbiamo aggirare
il suo diverso comportamento lì quando
si tratta di regolare la larghezza degli elementi dell'elenco ma alla fine, alla fine, ora funziona anche e
quindi ora hai imparato come organizzare le tue cose con FlatList, con vista di scorrimento, cosa c'è di speciale
in queste viste di elenco o in quelle viste scorrevoli in generale e come puoi ancora strutturare le tue cose nel
modo desiderato.