Quando si tratta di stilare un elenco, ovviamente è possibile definire sia gli elementi dell'elenco sia l'elenco
stesso.
Quindi iniziamo con gli elementi e
qui in realtà taglierò quel segno qui per così dire, in modo che il codice jsx per un elemento e aggiungerò una
nuova funzione al di fuori della funzione del componente perché non abbiamo davvero bisogno di nulla da
all'interno del componente e chiamerò solo questo elemento dell'elenco di rendering, il nome dipende da te.
È una funzione e questa funzione alla fine dovrebbe restituire un po 'di codice
jsx qui, quindi dovrebbe restituire questo codice jsx qui e per funzionare correttamente, ovviamente dobbiamo ottenere il
nostro valore che vogliamo produrre.
Quindi qui, userò il valore come chiave e il valore di output qui tra i tag di testo
e ora possiamo usare l'elemento dell'elenco di rendering
laggiù dove chiamiamo mappa e qui, lì voglio semplicemente eseguire l'elemento dell'elenco di rendering per ogni elemento che stai mappando e
inoltro indovinalo come valore in una voce dell'elenco di rendering.
Ora, se lo facciamo, dovremmo vedere lo stesso risultato di
prima, quindi niente di troppo fantasioso qui, ma ora abbiamo un markup più snello laggiù, un codice jsx
più magro laggiù e abbiamo qui il nostro codice jsx della voce di elenco.
Ora possiamo dare uno stile a questo e ovviamente voglio dare uno stile al mio punto di vista qui, per
questo aggiungerò uno stile qui dal foglio di stile che nominerò nella lista e lì
dentro, ora in realtà voglio avere due elementi di testo e uno dovrebbe essere il numero
del round e
il secondo dovrebbe essere il valore, quindi qui ho bisogno di un argomento aggiuntivo, ho bisogno del valore ma anche del numero del round
o numOfRound
come lo chiamo qui e voglio emetterlo dinamicamente
qui, forse con questo simbolo di hash di fronte solo per motivi stilistici.
Quindi ora abbiamo questi due testi in questo elenco qua e là, in realtà
non voglio usare il testo ma il corpo del testo in modo da avere il mio stile di testo predefinito.
Quindi, per questo, importiamo il testo del corpo dal testo del corpo dei componenti e usiamo il testo del corpo invece del normale
testo qui nella nostra voce di elenco. Detto questo, stiamo usando il carattere giusto
e ora aggiungiamo quell'oggetto elenco al nostro foglio di stile in modo da poter dare uno stile all'elemento elenco, in realtà
questo dovrebbe essere chiamato elemento elenco quindi e non elenco.
Quindi aggiungiamo ora un elemento di elenco al
foglio di stile, come questo e ora ovviamente possiamo
modellarlo in qualsiasi modo tu voglia, lo modellerò in un modo relativamente semplice qui, basta dargli un colore del bordo
diciamo nero o forse questo leggero colore grigiastro qui. Un'imbottitura in tutte le direzioni di diciamo 15 per avere una spaziatura, un margine sull'asse verticale
di 10 in modo da avere una
spaziatura tra le voci dell'elenco e che non siedano l'una accanto all'altra. Un colore di sfondo bianco forse
e ovviamente
puoi usare colori diversi qui se vuoi.
Ora è un inizio, ora quando
stiamo impostando un colore del bordo, dobbiamo anche impostare la larghezza del bordo qui anche
se altrimenti
non vedremo un bordo e lo imposterò su uno e molto importante, voglio avere questi due componenti di testo nella mia vista
siedono uno accanto all'altro e non uno sopra l'altro, il che sarebbe l'impostazione predefinita perché una vista utilizza
la flexbox e utilizza una direzione di flessione predefinita della colonna per far sì che l'elemento si trovi
uno accanto all'altro su un asse orizzontale, aggiungiamo riga di direzione flessibile qui proprio come questo.
E con ciò se salviamo questo e le ricostruzioni dell'app, proviamolo e vediamo come
appare, sì, sembra okay, ma c'è ancora spazio per miglioramenti.
Ad esempio, voglio impostare una larghezza su quell'elemento dell'elenco per assicurarmi che non sia largo quanto
il suo contenuto deve essere, ma largo quanto gli diciamo. Ora per aggiungere una larghezza, puoi aggiungere la larghezza qui per elencare l'elemento
ma
se lo facciamo e impostiamo questo per dire l'80%, vedrai che questo si comporta non nel modo in cui vuoi
che funzioni correttamente, quindi questo fa
non sembra giusto, ora il
contenuto è in qualche modo spostato ma l'elemento stesso non è certamente più ampio. Per modellare correttamente un elenco, il modo migliore è
semplicemente inserirlo in una vista e quindi dare uno stile a questa vista.
Quindi qui, possiamo
aggiungere una vista, dargli uno stile di
diciamo elenco, quindi qui mi riferisco all'elenco degli stili e ora aggiungo questo oggetto elenco al nostro foglio di stile,
come questo e in questo elenco, ora possiamo impostare una larghezza dell'80% e sbarazzarsi della larghezza qui sulla voce di elenco.
Se lo facciamo con questa vista avvolgente, ora vedrai che le voci dell'elenco hanno l'aspetto corretto e questo è solo
qualcosa di cui devi essere consapevole.
Se vuoi controllare l'altezza o la larghezza del tuo elenco, della tua vista di scorrimento, quindi non aggiungere lo stile alle
voci dell'elenco, inoltre
non aggiungerlo necessariamente direttamente alla vista di scorrimento a causa di come funziona internamente ma invece basta semplicemente
avvolgere una vista attorno alla vista di scorrimento in cui è stata impostata la larghezza e l'altezza desiderate.
Ora quello che noterai è che sull'elemento della lista, sarebbe bello se il numero del round
venisse emesso lì e quindi avessimo un po 'di spazio tra il numero del round e la
nostra ipotesi effettiva e per raggiungere questo obiettivo,
per quello che dobbiamo impostare uno stile qui sulla voce di elenco, possiamo impostare justifyContent che controlla come il contenuto di questa
vista è disposto lungo l'asse principale che riflette la direzione come asse orizzontale e lì, userò lo spazio
intorno per distribuire lo spazio libero disponibile attorno al nostro elementi di testo qui e ora per generare anche
il numero del round che ci aspettiamo come argomento qui nell'elemento dell'elenco di rendering, possiamo andare alla nostra funzione di mappa e
lì, in realtà otteniamo un secondo argomento in questa funzione che mappa chiama automaticamente e questo è
l'indice dell'elemento
che stiamo producendo, quindi potremmo inoltrare quell'indice qui per rendere l'elemento dell'elenco o l'indice più 1 poiché inizierà da 0
e probabilmente vorremmo stamparne uno per il primo turno invece di 0.
Ora, a parte questo, se aggiungiamo questo, ora sembra un po 'meglio e forse in realtà cambiamo questo aspetto qui dallo
spazio intorno allo spazio tra, penso che sembra più bello, ma prima di salvarlo e
aggiornarlo, lo farai nota anche che un problema che hai è che il numero rotondo non è effettivamente
corretto.
Il primo round è il round più in basso perché aggiungiamo nuovi round all'inizio dell'elenco, quindi
l'indice non è la misura giusta per il numero del percorso perché l'indice è sempre 0 o se aggiungiamo 1, è
1, per il primo elenco elemento, ma il primo elemento
dell'elenco non è in realtà il nostro primo round, poiché
poiché aggiungiamo nuovi round come primo elemento dell'elenco, il primo elemento dell'elenco è il nostro ultimo round e
certamente non il primo.
Quindi, per risolvere il problema, ciò che possiamo fare è qui nelle voci dell'elenco di rendering, invece di utilizzare l'indice, possiamo ovviamente usare la nostra
lista delle ipotesi passate qui e ottenere la lunghezza di quella lista e quindi dedurre l'indice da quello e che ci dà in realtà
il numero di giro corretto per un dato elemento dell'elenco.
Quindi ora se lo facciamo e lo riavviamo, ora vediamo che il round numero uno è l'ipotesi sette e che
rimane il numero uno se
aggiungiamo un'altra ipotesi e ora questo sembra funzionare correttamente qui.
Vedrai anche che non appena superiamo i nostri confini qui, ovviamente possiamo scorrere l'elenco e
anche questo sembra funzionare esattamente come dovrebbe.
Facciamo anche una prova su Android qui, iniziamo un nuovo gioco lì e speriamo di non vincere troppo presto,
sì, sembra che funzioni, ma
lì, in realtà non riesco a scorrere.
Quindi su Android, questo in realtà non funziona correttamente, questo
elenco non è scorrevole qui.
Quindi cosa c'è che non va su Android?
Ora mentre scorre bene su iOS, per la vista
di scorrimento nidificata in una vista per scorrere bene anche su Android, assicurati che la vista circostante utilizzi effettivamente quella
flessibile, quindi aggiungi questo allo stile
dell'elenco qui che è lo stile applicato a la vista racchiusa nella vista
di scorrimento.
Con ciò aggiunto, se ora proviamo di nuovo su Android,
ora noterai che ora questo è scorrevole non appena superi i confini dello schermo e su iOS, dovrebbe
comunque funzionare come prima e, essendo iOS,
possiamo anche scorrere senza che superi i limiti, questo è
solo il comportamento predefinito di iOS che puoi bilanciare un po 'tali elenchi.
Quindi ora abbiamo quell'elenco scorrevole qui con vista di scorrimento e mappa e funziona sia su Android che su
iOS.