1
00:00:02,320 --> 00:00:08,260
Quando si tratta di stilare un elenco, ovviamente è possibile definire sia gli elementi dell'elenco sia l'elenco

2
00:00:08,260 --> 00:00:08,810
stesso.

3
00:00:08,840 --> 00:00:10,830
Quindi iniziamo con gli elementi e

4
00:00:10,840 --> 00:00:17,440
qui in realtà taglierò quel segno qui per così dire, in modo che il codice jsx per un elemento e aggiungerò una

5
00:00:17,440 --> 00:00:22,420
nuova funzione al di fuori della funzione del componente perché non abbiamo davvero bisogno di nulla da

6
00:00:22,420 --> 00:00:27,380
all'interno del componente e chiamerò solo questo elemento dell'elenco di rendering, il nome dipende da te.

7
00:00:27,490 --> 00:00:33,850
È una funzione e questa funzione alla fine dovrebbe restituire un po 'di codice

8
00:00:33,850 --> 00:00:41,320
jsx qui, quindi dovrebbe restituire questo codice jsx qui e per funzionare correttamente, ovviamente dobbiamo ottenere il

9
00:00:41,690 --> 00:00:44,320
nostro valore che vogliamo produrre.

10
00:00:44,320 --> 00:00:50,950
Quindi qui, userò il valore come chiave e il valore di output qui tra i tag di testo

11
00:00:50,950 --> 00:00:54,240
e ora possiamo usare l'elemento dell'elenco di rendering

12
00:00:54,250 --> 00:01:01,850
laggiù dove chiamiamo mappa e qui, lì voglio semplicemente eseguire l'elemento dell'elenco di rendering per ogni elemento che stai mappando e

13
00:01:01,880 --> 00:01:05,410
inoltro indovinalo come valore in una voce dell'elenco di rendering.

14
00:01:05,440 --> 00:01:08,620
Ora, se lo facciamo, dovremmo vedere lo stesso risultato di

15
00:01:08,630 --> 00:01:13,720
prima, quindi niente di troppo fantasioso qui, ma ora abbiamo un markup più snello laggiù, un codice jsx

16
00:01:13,730 --> 00:01:17,690
più magro laggiù e abbiamo qui il nostro codice jsx della voce di elenco.

17
00:01:17,870 --> 00:01:23,930
Ora possiamo dare uno stile a questo e ovviamente voglio dare uno stile al mio punto di vista qui, per

18
00:01:23,930 --> 00:01:28,640
questo aggiungerò uno stile qui dal foglio di stile che nominerò nella lista e lì

19
00:01:28,650 --> 00:01:33,600
dentro, ora in realtà voglio avere due elementi di testo e uno dovrebbe essere il numero

20
00:01:33,600 --> 00:01:34,710
del round e

21
00:01:34,710 --> 00:01:41,940
il secondo dovrebbe essere il valore, quindi qui ho bisogno di un argomento aggiuntivo, ho bisogno del valore ma anche del numero del round

22
00:01:41,940 --> 00:01:42,980
o numOfRound

23
00:01:43,080 --> 00:01:45,640
come lo chiamo qui e voglio emetterlo dinamicamente

24
00:01:45,720 --> 00:01:49,800
qui, forse con questo simbolo di hash di fronte solo per motivi stilistici.

25
00:01:50,250 --> 00:01:54,030
Quindi ora abbiamo questi due testi in questo elenco qua e là, in realtà

26
00:01:54,030 --> 00:01:59,350
non voglio usare il testo ma il corpo del testo in modo da avere il mio stile di testo predefinito.

27
00:01:59,370 --> 00:02:06,030
Quindi, per questo, importiamo il testo del corpo dal testo del corpo dei componenti e usiamo il testo del corpo invece del normale

28
00:02:06,030 --> 00:02:10,860
testo qui nella nostra voce di elenco. Detto questo, stiamo usando il carattere giusto

29
00:02:10,860 --> 00:02:17,730
e ora aggiungiamo quell'oggetto elenco al nostro foglio di stile in modo da poter dare uno stile all'elemento elenco, in realtà

30
00:02:17,730 --> 00:02:21,040
questo dovrebbe essere chiamato elemento elenco quindi e non elenco.

31
00:02:21,040 --> 00:02:25,030
Quindi aggiungiamo ora un elemento di elenco al

32
00:02:25,390 --> 00:02:29,490
foglio di stile, come questo e ora ovviamente possiamo

33
00:02:29,860 --> 00:02:38,800
modellarlo in qualsiasi modo tu voglia, lo modellerò in un modo relativamente semplice qui, basta dargli un colore del bordo

34
00:02:38,800 --> 00:02:47,080
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

35
00:02:47,500 --> 00:02:49,360
di 10 in modo da avere una

36
00:02:49,360 --> 00:02:55,480
spaziatura tra le voci dell'elenco e che non siedano l'una accanto all'altra. Un colore di sfondo bianco forse

37
00:02:55,480 --> 00:02:57,280
e ovviamente

38
00:02:57,280 --> 00:03:01,210
puoi usare colori diversi qui se vuoi.

39
00:03:01,290 --> 00:03:03,060
Ora è un inizio, ora quando

40
00:03:03,060 --> 00:03:07,650
stiamo impostando un colore del bordo, dobbiamo anche impostare la larghezza del bordo qui anche

41
00:03:07,650 --> 00:03:08,370
se altrimenti

42
00:03:08,370 --> 00:03:14,850
non vedremo un bordo e lo imposterò su uno e molto importante, voglio avere questi due componenti di testo nella mia vista

43
00:03:14,850 --> 00:03:20,220
siedono uno accanto all'altro e non uno sopra l'altro, il che sarebbe l'impostazione predefinita perché una vista utilizza

44
00:03:20,430 --> 00:03:25,830
la flexbox e utilizza una direzione di flessione predefinita della colonna per far sì che l'elemento si trovi

45
00:03:25,830 --> 00:03:30,540
uno accanto all'altro su un asse orizzontale, aggiungiamo riga di direzione flessibile qui proprio come questo.

46
00:03:30,540 --> 00:03:35,990
E con ciò se salviamo questo e le ricostruzioni dell'app, proviamolo e vediamo come

47
00:03:36,030 --> 00:03:40,320
appare, sì, sembra okay, ma c'è ancora spazio per miglioramenti.

48
00:03:40,320 --> 00:03:46,320
Ad esempio, voglio impostare una larghezza su quell'elemento dell'elenco per assicurarmi che non sia largo quanto

49
00:03:46,350 --> 00:03:54,360
il suo contenuto deve essere, ma largo quanto gli diciamo. Ora per aggiungere una larghezza, puoi aggiungere la larghezza qui per elencare l'elemento

50
00:03:54,420 --> 00:03:54,940
ma

51
00:03:55,020 --> 00:04:01,200
se lo facciamo e impostiamo questo per dire l'80%, vedrai che questo si comporta non nel modo in cui vuoi

52
00:04:01,200 --> 00:04:03,110
che funzioni correttamente, quindi questo fa

53
00:04:03,110 --> 00:04:04,570
non sembra giusto, ora il

54
00:04:04,680 --> 00:04:13,260
contenuto è in qualche modo spostato ma l'elemento stesso non è certamente più ampio. Per modellare correttamente un elenco, il modo migliore è

55
00:04:13,260 --> 00:04:18,510
semplicemente inserirlo in una vista e quindi dare uno stile a questa vista.

56
00:04:18,510 --> 00:04:20,000
Quindi qui, possiamo

57
00:04:20,010 --> 00:04:22,290
aggiungere una vista, dargli uno stile di

58
00:04:22,290 --> 00:04:29,130
diciamo elenco, quindi qui mi riferisco all'elenco degli stili e ora aggiungo questo oggetto elenco al nostro foglio di stile,

59
00:04:29,130 --> 00:04:36,240
come questo e in questo elenco, ora possiamo impostare una larghezza dell'80% e sbarazzarsi della larghezza qui sulla voce di elenco.

60
00:04:36,240 --> 00:04:41,880
Se lo facciamo con questa vista avvolgente, ora vedrai che le voci dell'elenco hanno l'aspetto corretto e questo è solo

61
00:04:41,880 --> 00:04:43,620
qualcosa di cui devi essere consapevole.

62
00:04:43,740 --> 00:04:50,430
Se vuoi controllare l'altezza o la larghezza del tuo elenco, della tua vista di scorrimento, quindi non aggiungere lo stile alle

63
00:04:50,430 --> 00:04:51,650
voci dell'elenco, inoltre

64
00:04:51,690 --> 00:04:57,450
non aggiungerlo necessariamente direttamente alla vista di scorrimento a causa di come funziona internamente ma invece basta semplicemente

65
00:04:57,450 --> 00:05:03,250
avvolgere una vista attorno alla vista di scorrimento in cui è stata impostata la larghezza e l'altezza desiderate.

66
00:05:03,290 --> 00:05:09,320
Ora quello che noterai è che sull'elemento della lista, sarebbe bello se il numero del round

67
00:05:09,360 --> 00:05:15,630
venisse emesso lì e quindi avessimo un po 'di spazio tra il numero del round e la

68
00:05:15,630 --> 00:05:18,590
nostra ipotesi effettiva e per raggiungere questo obiettivo,

69
00:05:18,720 --> 00:05:26,670
per quello che dobbiamo impostare uno stile qui sulla voce di elenco, possiamo impostare justifyContent che controlla come il contenuto di questa

70
00:05:26,670 --> 00:05:33,070
vista è disposto lungo l'asse principale che riflette la direzione come asse orizzontale e lì, userò lo spazio

71
00:05:33,210 --> 00:05:40,260
intorno per distribuire lo spazio libero disponibile attorno al nostro elementi di testo qui e ora per generare anche

72
00:05:40,260 --> 00:05:48,360
il numero del round che ci aspettiamo come argomento qui nell'elemento dell'elenco di rendering, possiamo andare alla nostra funzione di mappa e

73
00:05:48,360 --> 00:05:54,510
lì, in realtà otteniamo un secondo argomento in questa funzione che mappa chiama automaticamente e questo è

74
00:05:54,510 --> 00:05:55,680
l'indice dell'elemento

75
00:05:55,680 --> 00:06:03,030
che stiamo producendo, quindi potremmo inoltrare quell'indice qui per rendere l'elemento dell'elenco o l'indice più 1 poiché inizierà da 0

76
00:06:03,030 --> 00:06:07,560
e probabilmente vorremmo stamparne uno per il primo turno invece di 0.

77
00:06:07,560 --> 00:06:15,300
Ora, a parte questo, se aggiungiamo questo, ora sembra un po 'meglio e forse in realtà cambiamo questo aspetto qui dallo

78
00:06:15,300 --> 00:06:20,980
spazio intorno allo spazio tra, penso che sembra più bello, ma prima di salvarlo e

79
00:06:20,980 --> 00:06:27,390
aggiornarlo, lo farai nota anche che un problema che hai è che il numero rotondo non è effettivamente

80
00:06:27,390 --> 00:06:27,970
corretto.

81
00:06:28,020 --> 00:06:33,030
Il primo round è il round più in basso perché aggiungiamo nuovi round all'inizio dell'elenco, quindi

82
00:06:33,030 --> 00:06:39,390
l'indice non è la misura giusta per il numero del percorso perché l'indice è sempre 0 o se aggiungiamo 1, è

83
00:06:39,450 --> 00:06:42,620
1, per il primo elenco elemento, ma il primo elemento

84
00:06:42,650 --> 00:06:45,700
dell'elenco non è in realtà il nostro primo round, poiché

85
00:06:45,780 --> 00:06:51,330
poiché aggiungiamo nuovi round come primo elemento dell'elenco, il primo elemento dell'elenco è il nostro ultimo round e

86
00:06:51,330 --> 00:06:52,940
certamente non il primo.

87
00:06:52,980 --> 00:07:02,670
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

88
00:07:02,880 --> 00:07:12,300
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à

89
00:07:12,370 --> 00:07:16,810
il numero di giro corretto per un dato elemento dell'elenco.

90
00:07:17,500 --> 00:07:24,310
Quindi ora se lo facciamo e lo riavviamo, ora vediamo che il round numero uno è l'ipotesi sette e che

91
00:07:24,310 --> 00:07:26,230
rimane il numero uno se

92
00:07:26,260 --> 00:07:29,520
aggiungiamo un'altra ipotesi e ora questo sembra funzionare correttamente qui.

93
00:07:29,560 --> 00:07:36,180
Vedrai anche che non appena superiamo i nostri confini qui, ovviamente possiamo scorrere l'elenco e

94
00:07:36,310 --> 00:07:39,430
anche questo sembra funzionare esattamente come dovrebbe.

95
00:07:39,430 --> 00:07:48,280
Facciamo anche una prova su Android qui, iniziamo un nuovo gioco lì e speriamo di non vincere troppo presto,

96
00:07:48,280 --> 00:07:51,000
sì, sembra che funzioni, ma

97
00:07:51,010 --> 00:07:54,640
lì, in realtà non riesco a scorrere.

98
00:07:54,640 --> 00:07:57,820
Quindi su Android, questo in realtà non funziona correttamente, questo

99
00:07:57,820 --> 00:07:59,850
elenco non è scorrevole qui.

100
00:07:59,860 --> 00:08:01,320
Quindi cosa c'è che non va su Android?

101
00:08:01,510 --> 00:08:04,930
Ora mentre scorre bene su iOS, per la vista

102
00:08:04,930 --> 00:08:12,490
di scorrimento nidificata in una vista per scorrere bene anche su Android, assicurati che la vista circostante utilizzi effettivamente quella

103
00:08:12,820 --> 00:08:15,080
flessibile, quindi aggiungi questo allo stile

104
00:08:15,100 --> 00:08:20,320
dell'elenco qui che è lo stile applicato a la vista racchiusa nella vista

105
00:08:20,320 --> 00:08:21,570
di scorrimento.

106
00:08:21,820 --> 00:08:25,120
Con ciò aggiunto, se ora proviamo di nuovo su Android,

107
00:08:28,940 --> 00:08:34,700
ora noterai che ora questo è scorrevole non appena superi i confini dello schermo e su iOS, dovrebbe

108
00:08:34,700 --> 00:08:37,460
comunque funzionare come prima e, essendo iOS,

109
00:08:37,580 --> 00:08:40,810
possiamo anche scorrere senza che superi i limiti, questo è

110
00:08:40,820 --> 00:08:45,090
solo il comportamento predefinito di iOS che puoi bilanciare un po 'tali elenchi.

111
00:08:45,710 --> 00:08:51,800
Quindi ora abbiamo quell'elenco scorrevole qui con vista di scorrimento e mappa e funziona sia su Android che su

112
00:08:51,800 --> 00:08:52,310
iOS.