1
00:00:02,180 --> 00:00:06,770
Agora é claro que aqui estou usando uma exibição de rolagem e você aprendeu que um FlatList é melhor

2
00:00:06,770 --> 00:00:10,160
se você tiver uma lista na qual não saiba quantos itens terá lá.

3
00:00:10,190 --> 00:00:16,490
Agora, para o nosso jogo, uma exibição de rolagem será realmente boa, porque sim,

4
00:00:16,490 --> 00:00:24,320
não sabemos quantos itens serão e, teoricamente, por supor muito mal, teremos cerca de 100 itens, mas isso

5
00:00:24,380 --> 00:00:34,020
quase nunca acontecerá. portanto, normalmente essa lista não contém mais de 10, 15, 20 itens e, portanto, provavelmente nunca causará problemas de

6
00:00:34,110 --> 00:00:38,480
desempenho, e usar uma exibição de rolagem aqui é absolutamente

7
00:00:38,520 --> 00:00:45,210
aceitável, pois sim, é uma lista que contém vários itens, isso excederá os limites da tela,

8
00:00:45,450 --> 00:00:52,140
mas raramente será uma lista com muitos itens, nunca será uma lista com mais de

9
00:00:52,140 --> 00:00:56,370
100 itens devido à maneira como o jogo funciona.

10
00:00:56,370 --> 00:01:01,770
Portanto, a visualização de rolagem seria boa aqui, mas caso você ainda queira usar um FlatList, deixe-me

11
00:01:01,800 --> 00:01:03,050
mostrar isso também.

12
00:01:03,060 --> 00:01:08,460
Para isso, podemos adicionar o FlatList aqui e, claro, significa que precisamos importar o FlatList do

13
00:01:08,460 --> 00:01:08,910
React

14
00:01:09,390 --> 00:01:13,020
Native; portanto, aqui, importarei o FlatList assim e com o FlatList

15
00:01:13,020 --> 00:01:19,590
importado, você aprendeu que o FlatList adota um suporte de dados que aponta para o dados que você deseja alimentar

16
00:01:19,670 --> 00:01:22,630
e, no nosso caso, aqui, isso seria nossa matriz

17
00:01:22,680 --> 00:01:31,710
de suposições passadas e, em seguida, você terá um suporte de item de renderização que lhe permitirá produzir os itens para cada item nos dados que você está

18
00:01:31,860 --> 00:01:37,350
alimentando, portanto, imprima o componentes para cada item nos dados e aqui posso apontar para o item

19
00:01:37,350 --> 00:01:38,250
da lista

20
00:01:38,250 --> 00:01:42,870
de renderização que deve ser chamado. Agora, no momento, isso

21
00:01:42,870 --> 00:01:48,390
não funcionará por alguns motivos. Por um lado, o item da lista de

22
00:01:48,750 --> 00:01:55,620
renderização espera dois valores, mas o item de renderização aqui no FlatList encaminhará apenas um item, e são esses dados que contêm

23
00:01:55,620 --> 00:01:59,950
informações sobre o índice e sobre o item que estamos prestes a imprimir.

24
00:01:59,970 --> 00:02:03,510
A outra coisa que nos causará problemas é a chave.

25
00:02:03,540 --> 00:02:10,710
Você deve se lembrar que o FlatList espera obter objetos na matriz que você está passando, onde cada objeto tem uma propriedade

26
00:02:10,740 --> 00:02:16,130
de chave que pode ser extraída e usada como chave para uma nova renderização eficiente.

27
00:02:16,140 --> 00:02:21,880
Agora não temos uma matriz de objetos aqui, temos uma matriz de números e isso não vai funcionar.

28
00:02:21,960 --> 00:02:28,680
Agora, podemos adicionar um extrator de chave aqui ao FlatList para substituir seu padrão, o extrator de chave assume uma função que

29
00:02:28,770 --> 00:02:35,070
obtém nosso item no final e, em seguida, precisamos informar ao FlatList onde encontrar nossa chave e, por padrão,

30
00:02:35,070 --> 00:02:38,170
procura por item. chave ou para o item. id, aqui

31
00:02:38,280 --> 00:02:41,860
queremos dizer que o item em si é essencial.

32
00:02:42,090 --> 00:02:46,580
Agora o FlatList, no entanto, deseja uma chave que seja uma sequência e não um

33
00:02:46,590 --> 00:02:48,510
número, caso contrário, receberá um aviso.

34
00:02:48,510 --> 00:02:54,480
Portanto, a próxima coisa que precisamos fazer é que as suposições passadas que estamos gerenciando devem ser seqüências de caracteres e isso

35
00:02:54,480 --> 00:02:58,800
não é problema, porque as usamos apenas para imprimi-las na tela de qualquer maneira, para que

36
00:02:58,800 --> 00:03:03,750
não nos importemos se elas são tecnicamente armazenado como um número ou como uma string e, portanto, aqui,

37
00:03:03,750 --> 00:03:09,630
quando adicionamos um novo palpite, podemos simplesmente chamar toString, que é um método Javascript interno no número para convertê-lo em um tipo

38
00:03:09,630 --> 00:03:16,490
de string e fazer o mesmo com o valor inicial de curso. Aqui, onde adiciono meu palpite inicial, chame toString

39
00:03:16,500 --> 00:03:19,140
também e agora temos strings

40
00:03:19,140 --> 00:03:26,030
e, portanto, eles podem ser usados como números. Agora, como eu disse, o item da lista de renderização

41
00:03:26,030 --> 00:03:31,940
espera os argumentos errados, numOfRound não funcionará assim, o valor também não funcionará assim. Em vez disso,

42
00:03:31,940 --> 00:03:34,430
estamos obtendo os dados do item

43
00:03:34,550 --> 00:03:42,440
e ainda podemos esperar um argumento extra, no entanto, isso deve ser esperado como o primeiro argumento, porque agora podemos simplesmente descer para

44
00:03:42,740 --> 00:03:49,280
renderizar o item aqui no FlatList e ligar os argumentos que devem ser passados, para que possamos adicionar argumentos

45
00:03:49,460 --> 00:03:55,330
adicionais além do argumento padrão que será passado. Agora, o bind espera que isso seja o primeiro argumento, para

46
00:03:55,350 --> 00:04:00,210
que definamos o que isso deve se referir na função que estamos chamando; não nos importamos aqui; portanto,

47
00:04:00,210 --> 00:04:00,920
acrescentarei a

48
00:04:00,920 --> 00:04:03,720
isso, você também pode defini-lo como nulo, não importa.

49
00:04:03,750 --> 00:04:10,350
O segundo argumento que adicionamos aqui será o primeiro argumento recebido por essa

50
00:04:10,350 --> 00:04:14,830
função e esse deve ser o número da rodada

51
00:04:14,860 --> 00:04:21,510
que deve ser pastGuesses. comprimento. Anteriormente, deduzi o índice aqui, mas isso não

52
00:04:21,510 --> 00:04:23,640
funciona mais porque não tenho mais acesso

53
00:04:23,640 --> 00:04:27,430
ao índice, não estamos mapeando manualmente. Então, passarei o comprimento para

54
00:04:27,700 --> 00:04:34,170
lá e o bom é que posso obter o índice dentro do item de renderização a partir dos dados do item.

55
00:04:34,170 --> 00:04:39,780
Esse argumento padrão também será passado pelo React e o argumento padrão será passado automaticamente para

56
00:04:39,840 --> 00:04:40,960
o último argumento.

57
00:04:41,010 --> 00:04:43,890
Portanto, os primeiros argumentos serão os argumentos que

58
00:04:43,890 --> 00:04:45,840
você configurou no bind, neste

59
00:04:45,830 --> 00:04:52,620
caso, esse é apenas um argumento, nosso número de rodadas ou nosso comprimento da matriz e, em seguida, quaisquer argumentos

60
00:04:52,620 --> 00:04:58,500
padrão que seriam passados normalmente serão adicionados como argumentos adicionais no final da sua lista de argumentos aqui.

61
00:04:58,500 --> 00:05:01,500
Agora, aqui, número de rodadas também não

62
00:05:01,500 --> 00:05:07,530
é mais um nome adequado; em vez disso, é o tamanho da lista, que soa como

63
00:05:07,580 --> 00:05:13,970
um nome melhor porque é isso que estamos obtendo, mas aqui podemos calcular nosso número de rodadas usando

64
00:05:13,970 --> 00:05:20,120
o tamanho da lista e, em seguida, deduzindo itemData. index porque os dados do item que você está obtendo automaticamente pelo React Native são um objeto

65
00:05:20,120 --> 00:05:27,440
que também possui uma propriedade index, que é o índice do item que você está produzindo e você também obtém itemData. item e esse é o próprio

66
00:05:27,920 --> 00:05:31,740
item que, no nosso caso, é o palpite.

67
00:05:32,000 --> 00:05:37,700
Agora também não precisamos mais adicionar uma chave aqui, porque essa codificação será feita pelo

68
00:05:37,700 --> 00:05:41,740
React Native graças ao FlatList. Então, isso foi muito trabalhoso,

69
00:05:41,750 --> 00:05:43,940
agora poderemos exibir uma lista novamente.

70
00:05:43,940 --> 00:05:46,590
Então, vamos salvar isso e tentar

71
00:05:46,590 --> 00:05:48,860
aqui e que parece funcionar,

72
00:05:49,320 --> 00:05:55,440
mas é claro que perdemos o posicionamento agora. Anteriormente, o que fizemos foi adicionar o estilo do contêiner de conteúdo,

73
00:05:55,440 --> 00:05:58,300
a lista de estilos aqui à exibição de rolagem;

74
00:05:58,320 --> 00:06:04,200
o bom é que você também pode fazer isso no FlatList. Embora você possa adicionar um estilo como na exibição

75
00:06:04,200 --> 00:06:10,320
de rolagem, esse estilo permite adicionar, por exemplo, uma margem ao redor da lista, mas não permite alinhar o conteúdo

76
00:06:10,320 --> 00:06:12,510
dentro da lista. Para isso,

77
00:06:12,510 --> 00:06:16,900
use o estilo do contêiner de conteúdo que também é suportado pelo FlatList e,

78
00:06:16,980 --> 00:06:22,200
portanto, aqui, também podemos apontar para a lista de estilos e, portanto, isso agora deve funcionar como

79
00:06:22,200 --> 00:06:23,750
nossa exibição de rolagem antes.

80
00:06:23,760 --> 00:06:32,650
Então, vamos tentar e você verá que começamos na parte inferior aqui e agora podemos começar a adicionar itens.

81
00:06:32,650 --> 00:06:35,390
Agora vamos ver se a rolagem também funciona como

82
00:06:36,050 --> 00:06:39,820
deveria, sim, funciona e podemos ver o item mais recente e o item mais

83
00:06:39,950 --> 00:06:43,400
antigo. Sim, há algo errado com o posicionamento dos itens no item

84
00:06:43,420 --> 00:06:49,010
da lista e voltarei a isso, mas geralmente, isso funciona. Vamos testá-lo também no Android, então vamos

85
00:06:49,010 --> 00:06:50,130
começar a adivinhar

86
00:06:50,150 --> 00:06:54,610
e torcer para que não resolvamos isso muito cedo, não, que

87
00:06:54,630 --> 00:06:55,740
funcione e

88
00:06:55,740 --> 00:07:02,200
aqui, também podemos rolar como você pode ver. Portanto, isso também funciona com o FlatList.

89
00:07:02,200 --> 00:07:08,160
Agora, e quanto a essa estranha distribuição de conteúdo aqui nos itens de nossa lista?

90
00:07:08,170 --> 00:07:15,070
Bem, você notará que os itens da lista são maiores do que eram antes.

91
00:07:15,160 --> 00:07:21,010
O conteúdo é distribuído como se o item da lista terminasse aqui e esse é realmente o problema.

92
00:07:21,010 --> 00:07:27,910
Temos uma largura de 60% do item da lista e nosso conteúdo respeita isso, mas nossas

93
00:07:27,910 --> 00:07:29,510
fronteiras estranhamente não.

94
00:07:29,590 --> 00:07:34,870
Para corrigir esse comportamento estranho do FlatList, o que você pode fazer é acessar o contêiner da

95
00:07:34,870 --> 00:07:41,110
lista que contém a lista geral e definir a largura para a largura da lista desejada no final, como digamos

96
00:07:41,860 --> 00:07:45,810
60% e dar uma largura aos itens da lista de 100%.

97
00:07:45,820 --> 00:07:52,300
Portanto, agora o contêiner de lista em geral é menor, é menos amplo e, portanto, os itens da lista assumem essa largura e têm a

98
00:07:52,300 --> 00:07:53,850
mesma largura e, uma vez

99
00:07:53,950 --> 00:07:58,840
que raramente é necessário o caso de uso em que o contêiner de lista precisa ser maior que os

100
00:07:59,230 --> 00:08:04,150
itens da lista, porque o que mais seria lá no contêiner da lista, essa deve ser uma boa solução.

101
00:08:04,180 --> 00:08:11,300
Agora, se você fizer isso, notará que a largura parece melhor, mas, na verdade, o posicionamento agora é um problema.

102
00:08:11,320 --> 00:08:17,080
Bem, como agora temos a largura controlada no contêiner de lista externo, podemos nos livrar do

103
00:08:17,080 --> 00:08:20,740
alinhamento de itens centralizados aqui na própria lista; portanto,

104
00:08:20,740 --> 00:08:25,760
lembre-se de que foi o estilo adicionado ao estilo do contêiner de conteúdo.

105
00:08:25,810 --> 00:08:30,810
Mantemos o estilo lá, mas eu removi o alinhamento de itens no centro, porque

106
00:08:31,060 --> 00:08:35,050
não há nada para centralizar agora, temos a largura definida no contêiner

107
00:08:35,050 --> 00:08:41,890
da lista e não nos itens da lista. Portanto, graças a eles terem 100%, eles são centralizados automaticamente porque de

108
00:08:41,890 --> 00:08:45,070
qualquer maneira, a largura total e, portanto, agora,

109
00:08:45,070 --> 00:08:52,420
se fizermos outra tentativa, isso parece funcionar muito melhor e os itens da lista são realmente dispostos da maneira que deveriam ser.

110
00:08:52,420 --> 00:08:57,940
Portanto, se tivermos outro por aqui que talvez demore um pouco mais, sim, com boa aparência,

111
00:08:57,940 --> 00:09:04,230
então aqui podemos ver que temos o mesmo comportamento de antes, temos o estilo agradável e também trabalhamos com

112
00:09:04,240 --> 00:09:09,760
esse comportamento diferente que o FlatList nos fornece. Vamos experimentar o Android aqui e iniciar um

113
00:09:09,760 --> 00:09:10,930
novo jogo lá,

114
00:09:12,670 --> 00:09:14,290
oh, isso não será um

115
00:09:16,120 --> 00:09:17,020
jogo longo,

116
00:09:17,020 --> 00:09:19,800
o suficiente, então também funciona tudo como deveria.

117
00:09:19,960 --> 00:09:25,780
E é assim que você pode fazer isso com o FlatList, pois, como você vê, funciona de maneira um

118
00:09:25,780 --> 00:09:27,600
pouco diferente, temos que contornar seu

119
00:09:27,610 --> 00:09:33,550
comportamento diferente quando se trata de ajustar a largura dos itens da lista, mas, no final, isso agora também

120
00:09:34,090 --> 00:09:40,330
funciona e portanto, agora você aprendeu a organizar suas coisas com o FlatList, com a exibição de rolagem, o que há

121
00:09:40,330 --> 00:09:46,990
de especial nessas exibições de lista ou nessas exibições roláveis em geral e como você ainda pode organizar suas coisas da maneira

122
00:09:46,990 --> 00:09:47,970
que desejar.