1
00:00:02,320 --> 00:00:08,260
Quando se trata de estilizar uma lista, é claro que podemos estilizar os itens da lista e também a própria

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

3
00:00:08,840 --> 00:00:10,830
Então, vamos começar com os

4
00:00:10,840 --> 00:00:17,440
itens e aqui, na verdade, cortarei essa marcação aqui, por assim dizer, para que o código jsx de um item e

5
00:00:17,440 --> 00:00:22,420
adicione uma nova função fora da função component, porque realmente não precisamos de nada dentro do

6
00:00:22,420 --> 00:00:27,380
componente e nomearemos apenas esse item da lista de renderizações, o nome é com você.

7
00:00:27,490 --> 00:00:33,850
É uma função e essa função no final deve retornar algum código jsx aqui, portanto,

8
00:00:33,850 --> 00:00:41,320
deve retornar esse código jsx aqui e para funcionar corretamente, é claro que é preciso obter digamos

9
00:00:41,690 --> 00:00:44,320
o valor que queremos gerar.

10
00:00:44,320 --> 00:00:50,950
Então, aqui, usarei value como uma chave e o valor de saída aqui entre as tags de texto e agora podemos

11
00:00:50,950 --> 00:00:54,240
usar o item da lista de renderização lá em baixo

12
00:00:54,250 --> 00:01:01,850
onde chamamos de mapa e aqui, lá, eu simplesmente quero executar o item da lista de renderização para cada item que estamos mapeando e encaminho

13
00:01:01,880 --> 00:01:05,410
isso como um valor em um item da lista de renderização.

14
00:01:05,440 --> 00:01:08,620
Agora, se fizermos isso, veremos o mesmo resultado de antes,

15
00:01:08,630 --> 00:01:13,720
portanto, nada muito sofisticado aqui, mas agora temos uma marcação mais enxuta lá embaixo, um código jsx mais

16
00:01:13,730 --> 00:01:17,690
enxuto lá em baixo e temos nosso código jsx do item de lista aqui.

17
00:01:17,870 --> 00:01:23,930
Agora podemos estilizar isso e, é claro, eu quero estilizar minha visualização aqui, para isso, adicionarei um estilo aqui

18
00:01:23,930 --> 00:01:28,640
da folha de estilo, que vou nomear a lista e lá, na verdade, agora

19
00:01:28,650 --> 00:01:33,600
quero ter dois itens de texto e um deve ser o número da rodada e

20
00:01:33,600 --> 00:01:34,710
o segundo deve

21
00:01:34,710 --> 00:01:41,940
ser o valor, então aqui eu preciso de um argumento adicional, preciso do valor, mas também o número da rodada ou numOfRound,

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

23
00:01:43,080 --> 00:01:45,640
nomeio aqui e quero gerar isso dinamicamente aqui,

24
00:01:45,720 --> 00:01:49,800
talvez com esse símbolo de hash na frente dele apenas por razões estilísticas.

25
00:01:50,250 --> 00:01:54,030
Portanto, agora temos esses dois textos nesta lista aqui e ali, na

26
00:01:54,030 --> 00:01:59,350
verdade, não quero usar o texto, mas o corpo, para que eu tenha meu estilo de texto padrão.

27
00:01:59,370 --> 00:02:06,030
Portanto, para isso, vamos importar o texto do corpo dos componentes e usar o corpo em vez do texto normal

28
00:02:06,030 --> 00:02:10,860
aqui em nosso item de lista. Com isso, estamos usando a fonte correta e

29
00:02:10,860 --> 00:02:17,730
agora vamos adicionar esse objeto de lista à nossa folha de estilo para que possamos estilizar o item de lista; na verdade, isso deve

30
00:02:17,730 --> 00:02:21,040
ser chamado de item de lista, portanto, e não de lista.

31
00:02:21,040 --> 00:02:25,030
Então, vamos adicionar o item da lista à

32
00:02:25,390 --> 00:02:29,490
folha de estilo agora, assim e agora, é claro,

33
00:02:29,860 --> 00:02:38,800
podemos estilizá-lo da maneira que você quiser, vou estilizá-lo de uma maneira relativamente fácil aqui, basta dar uma cor de

34
00:02:38,800 --> 00:02:47,080
borda, digamos preto ou talvez isso leve cor acinzentada aqui. Um preenchimento em todas as direções de, digamos, 15 para ter algum espaçamento, uma margem no eixo vertical

35
00:02:47,500 --> 00:02:49,360
de 10, para que tenhamos um espaçamento

36
00:02:49,360 --> 00:02:55,480
entre os itens da lista e eles não fiquem bem próximos um do outro. Uma cor de fundo em branco

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

38
00:02:57,280 --> 00:03:01,210
você pode usar cores diferentes aqui, se quiser.

39
00:03:01,290 --> 00:03:03,060
Agora que é o começo,

40
00:03:03,060 --> 00:03:07,650
agora, quando estamos definindo uma cor de borda, também precisamos configurar a largura da borda

41
00:03:07,650 --> 00:03:08,370
aqui, caso

42
00:03:08,370 --> 00:03:14,850
contrário, não veremos uma borda, e eu a definirei como uma e muito importante, quero ter essas na minha visualização, dois componentes

43
00:03:14,850 --> 00:03:20,220
de texto ficam próximos um do outro e não acima um do outro, o que seria o padrão,

44
00:03:20,430 --> 00:03:25,830
porque um modo de exibição usa flexbox e usa uma direção flexível da coluna para que o item

45
00:03:25,830 --> 00:03:30,540
fique ao lado do outro em um eixo horizontal, adicionamos linha de direção flex aqui, assim.

46
00:03:30,540 --> 00:03:35,990
E com isso, se salvarmos isso e o aplicativo reconstruir, vamos tentar e ver como isso

47
00:03:36,030 --> 00:03:40,320
se parece, sim, que parece bom, mas ainda há espaço para melhorias.

48
00:03:40,320 --> 00:03:46,320
Por exemplo, quero definir uma largura nesse item da lista para garantir que ele não seja tão largo

49
00:03:46,350 --> 00:03:54,360
quanto o conteúdo precisa, mas tão amplo quanto o que dizemos. Agora, para adicionar uma largura, você pode adicionar largura aqui para listar o

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

51
00:03:55,020 --> 00:04:01,200
mas se fizermos isso e configurá-lo como digamos 80%, você verá que isso não se comporta da maneira que você deseja

52
00:04:01,200 --> 00:04:03,110
que se comporte corretamente, então não

53
00:04:03,110 --> 00:04:04,570
parece certo, agora o conteúdo

54
00:04:04,680 --> 00:04:13,260
foi movido de alguma forma, mas o item em si certamente não é mais amplo. Para estilizar uma lista corretamente, a melhor

55
00:04:13,260 --> 00:04:18,510
maneira é simplesmente envolvê-la em uma exibição e depois estilizá-la.

56
00:04:18,510 --> 00:04:20,000
Então, aqui, podemos adicionar

57
00:04:20,010 --> 00:04:22,290
uma visualização, dar um estilo de lista

58
00:04:22,290 --> 00:04:29,130
digamos, então aqui estou me referindo à lista de estilos e adicionar esse objeto de lista à nossa folha de

59
00:04:29,130 --> 00:04:36,240
estilo agora, assim e nesta lista, agora podemos definir uma largura de 80% e livre-se da largura aqui no item da lista.

60
00:04:36,240 --> 00:04:41,880
Se fizermos isso com essa exibição de agrupamento, agora você verá que os itens da lista têm a aparência correta e isso

61
00:04:41,880 --> 00:04:43,620
é apenas algo para estar ciente.

62
00:04:43,740 --> 00:04:50,430
Se você deseja controlar a altura ou a largura da sua lista, da sua exibição de rolagem, não adicione o estilo aos itens

63
00:04:50,430 --> 00:04:51,650
da lista, também

64
00:04:51,690 --> 00:04:57,450
não o adicione necessariamente diretamente à exibição de rolagem, por causa de como isso funciona internamente, mas em vez

65
00:04:57,450 --> 00:05:03,250
disso, basta envolver uma vista em torno da vista de rolagem, onde você define a largura e a altura desejadas.

66
00:05:03,290 --> 00:05:09,320
Agora, o que você notará é que, no item da lista, seria bom se tivéssemos o número

67
00:05:09,360 --> 00:05:15,630
da rodada sendo produzido lá e tivéssemos algum espaçamento entre o número da rodada e nossa estimativa real

68
00:05:15,630 --> 00:05:18,590
e para conseguir isso, para um que precisamos

69
00:05:18,720 --> 00:05:26,670
definir como um estilo aqui no item de lista, podemos definir justifyContent que controla como o conteúdo dessa visualização é disposto ao longo

70
00:05:26,670 --> 00:05:33,070
do eixo principal, que reflete a direção como o eixo horizontal e, lá, usarei espaço ao redor para distribuir

71
00:05:33,210 --> 00:05:40,260
o espaço livre disponível ao redor do nosso itens de texto aqui e agora para também gerar o número da rodada

72
00:05:40,260 --> 00:05:48,360
que esperamos como argumento aqui no item da lista de renderização, podemos descer para a nossa função de mapa e lá, na verdade, temos

73
00:05:48,360 --> 00:05:54,510
um segundo argumento nessa função que o mapa chama automaticamente e esse é o índice do item que

74
00:05:54,510 --> 00:05:55,680
estamos produzindo,

75
00:05:55,680 --> 00:06:03,030
para podermos encaminhar esse índice aqui para renderizar o item da lista ou o índice mais 1, pois ele começará em 0

76
00:06:03,030 --> 00:06:07,560
e provavelmente queremos imprimir um para a primeira rodada em vez de 0.

77
00:06:07,560 --> 00:06:15,300
Agora, com isso fora do caminho, se adicionarmos isso, agora isso parece um pouco melhor e talvez possamos realmente mudar esse visual

78
00:06:15,300 --> 00:06:20,980
aqui de um espaço para outro, acho que fica melhor, mas antes de salvar e atualizar

79
00:06:20,980 --> 00:06:27,390
isso, você Observe também que um dos seus problemas é que o número da rodada não está realmente

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

81
00:06:28,020 --> 00:06:33,030
A primeira rodada é a mais baixa, porque adicionamos novas rodadas no início da lista; portanto, o índice

82
00:06:33,030 --> 00:06:39,390
não é a medida correta para o número da rota, porque o índice é sempre 0 ou, se adicionarmos 1, será 1 para

83
00:06:39,450 --> 00:06:42,620
a primeira lista. item, mas o primeiro item da lista não

84
00:06:42,650 --> 00:06:45,700
é realmente a nossa primeira rodada. Em vez disso, como

85
00:06:45,780 --> 00:06:51,330
adicionamos novas rodadas como o primeiro item da lista, o primeiro item da lista é a nossa rodada mais recente

86
00:06:51,330 --> 00:06:52,940
e, certamente, não a primeira.

87
00:06:52,980 --> 00:07:02,670
Então, para corrigir isso, o que podemos fazer é aqui em renderizar itens da lista, em vez de usar o índice, é claro que podemos usar

88
00:07:02,880 --> 00:07:12,300
nossa lista de suposições anteriores aqui e obter o comprimento dessa lista e, em seguida, deduzir o índice disso e isso nos dá na verdade,

89
00:07:12,370 --> 00:07:16,810
o número da rodada correto para um determinado item da lista.

90
00:07:17,500 --> 00:07:24,310
Então, agora, se fizermos isso e reiniciarmos, agora veremos que a rodada número um é o palpite sete e que

91
00:07:24,310 --> 00:07:26,230
permanece o número um se

92
00:07:26,260 --> 00:07:29,520
adicionarmos outro palpite e agora isso parece funcionar corretamente aqui.

93
00:07:29,560 --> 00:07:36,180
Você também verá que, assim que ultrapassamos nossos limites aqui, é claro que podemos rolar a lista e

94
00:07:36,310 --> 00:07:39,430
isso também parece funcionar da maneira que deveria.

95
00:07:39,430 --> 00:07:48,280
Vamos também experimentar o Android aqui, começar um novo jogo lá e esperar que não ganhemos muito

96
00:07:48,280 --> 00:07:51,000
cedo, sim, isso parece funcionar,

97
00:07:51,010 --> 00:07:54,640
mas lá, na verdade, não consigo rolar.

98
00:07:54,640 --> 00:07:57,820
Portanto, no Android, isso não está funcionando corretamente, essa lista

99
00:07:57,820 --> 00:07:59,850
não pode ser rolada lá.

100
00:07:59,860 --> 00:08:01,320
Então, o que há de errado no Android?

101
00:08:01,510 --> 00:08:04,930
Agora, enquanto ele rola bem no iOS, para que

102
00:08:04,930 --> 00:08:12,490
a exibição aninhada em uma exibição também role no Android, verifique se a vista ao redor realmente usa o flex

103
00:08:12,820 --> 00:08:15,080
one; portanto, adicione-o ao estilo de

104
00:08:15,100 --> 00:08:20,320
lista aqui, que é o estilo aplicado a a vista envolvida na visualização

105
00:08:20,320 --> 00:08:21,570
de rolagem.

106
00:08:21,820 --> 00:08:25,120
Com isso adicionado, se agora tentarmos novamente no Android, você

107
00:08:28,940 --> 00:08:34,700
perceberá que agora pode ser rolado assim que ultrapassar os limites da tela e no iOS, ele ainda

108
00:08:34,700 --> 00:08:37,460
funcionará como antes e, sendo o iOS,

109
00:08:37,580 --> 00:08:40,810
podemos mesmo rolando sem exceder os limites, esse é apenas

110
00:08:40,820 --> 00:08:45,090
o comportamento padrão do iOS que você pode equilibrar um pouco nessas listas.

111
00:08:45,710 --> 00:08:51,800
Então agora temos essa lista rolável aqui com visualização e mapa de rolagem e funciona no Android e no

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