Agora é claro que aqui estou usando uma exibição de rolagem e você aprendeu que um FlatList é melhor
se você tiver uma lista na qual não saiba quantos itens terá lá.
Agora, para o nosso jogo, uma exibição de rolagem será realmente boa, porque sim,
não sabemos quantos itens serão e, teoricamente, por supor muito mal, teremos cerca de 100 itens, mas isso
quase nunca acontecerá. portanto, normalmente essa lista não contém mais de 10, 15, 20 itens e, portanto, provavelmente nunca causará problemas de
desempenho, e usar uma exibição de rolagem aqui é absolutamente
aceitável, pois sim, é uma lista que contém vários itens, isso excederá os limites da tela,
mas raramente será uma lista com muitos itens, nunca será uma lista com mais de
100 itens devido à maneira como o jogo funciona.
Portanto, a visualização de rolagem seria boa aqui, mas caso você ainda queira usar um FlatList, deixe-me
mostrar isso também.
Para isso, podemos adicionar o FlatList aqui e, claro, significa que precisamos importar o FlatList do
React
Native; portanto, aqui, importarei o FlatList assim e com o FlatList
importado, você aprendeu que o FlatList adota um suporte de dados que aponta para o dados que você deseja alimentar
e, no nosso caso, aqui, isso seria nossa matriz
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á
alimentando, portanto, imprima o componentes para cada item nos dados e aqui posso apontar para o item
da lista
de renderização que deve ser chamado. Agora, no momento, isso
não funcionará por alguns motivos. Por um lado, o item da lista de
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
informações sobre o índice e sobre o item que estamos prestes a imprimir.
A outra coisa que nos causará problemas é a chave.
Você deve se lembrar que o FlatList espera obter objetos na matriz que você está passando, onde cada objeto tem uma propriedade
de chave que pode ser extraída e usada como chave para uma nova renderização eficiente.
Agora não temos uma matriz de objetos aqui, temos uma matriz de números e isso não vai funcionar.
Agora, podemos adicionar um extrator de chave aqui ao FlatList para substituir seu padrão, o extrator de chave assume uma função que
obtém nosso item no final e, em seguida, precisamos informar ao FlatList onde encontrar nossa chave e, por padrão,
procura por item. chave ou para o item. id, aqui
queremos dizer que o item em si é essencial.
Agora o FlatList, no entanto, deseja uma chave que seja uma sequência e não um
número, caso contrário, receberá um aviso.
Portanto, a próxima coisa que precisamos fazer é que as suposições passadas que estamos gerenciando devem ser seqüências de caracteres e isso
não é problema, porque as usamos apenas para imprimi-las na tela de qualquer maneira, para que
não nos importemos se elas são tecnicamente armazenado como um número ou como uma string e, portanto, aqui,
quando adicionamos um novo palpite, podemos simplesmente chamar toString, que é um método Javascript interno no número para convertê-lo em um tipo
de string e fazer o mesmo com o valor inicial de curso. Aqui, onde adiciono meu palpite inicial, chame toString
também e agora temos strings
e, portanto, eles podem ser usados como números. Agora, como eu disse, o item da lista de renderização
espera os argumentos errados, numOfRound não funcionará assim, o valor também não funcionará assim. Em vez disso,
estamos obtendo os dados do item
e ainda podemos esperar um argumento extra, no entanto, isso deve ser esperado como o primeiro argumento, porque agora podemos simplesmente descer para
renderizar o item aqui no FlatList e ligar os argumentos que devem ser passados, para que possamos adicionar argumentos
adicionais além do argumento padrão que será passado. Agora, o bind espera que isso seja o primeiro argumento, para
que definamos o que isso deve se referir na função que estamos chamando; não nos importamos aqui; portanto,
acrescentarei a
isso, você também pode defini-lo como nulo, não importa.
O segundo argumento que adicionamos aqui será o primeiro argumento recebido por essa
função e esse deve ser o número da rodada
que deve ser pastGuesses. comprimento. Anteriormente, deduzi o índice aqui, mas isso não
funciona mais porque não tenho mais acesso
ao índice, não estamos mapeando manualmente. Então, passarei o comprimento para
lá e o bom é que posso obter o índice dentro do item de renderização a partir dos dados do item.
Esse argumento padrão também será passado pelo React e o argumento padrão será passado automaticamente para
o último argumento.
Portanto, os primeiros argumentos serão os argumentos que
você configurou no bind, neste
caso, esse é apenas um argumento, nosso número de rodadas ou nosso comprimento da matriz e, em seguida, quaisquer argumentos
padrão que seriam passados normalmente serão adicionados como argumentos adicionais no final da sua lista de argumentos aqui.
Agora, aqui, número de rodadas também não
é mais um nome adequado; em vez disso, é o tamanho da lista, que soa como
um nome melhor porque é isso que estamos obtendo, mas aqui podemos calcular nosso número de rodadas usando
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
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
item que, no nosso caso, é o palpite.
Agora também não precisamos mais adicionar uma chave aqui, porque essa codificação será feita pelo
React Native graças ao FlatList. Então, isso foi muito trabalhoso,
agora poderemos exibir uma lista novamente.
Então, vamos salvar isso e tentar
aqui e que parece funcionar,
mas é claro que perdemos o posicionamento agora. Anteriormente, o que fizemos foi adicionar o estilo do contêiner de conteúdo,
a lista de estilos aqui à exibição de rolagem;
o bom é que você também pode fazer isso no FlatList. Embora você possa adicionar um estilo como na exibição
de rolagem, esse estilo permite adicionar, por exemplo, uma margem ao redor da lista, mas não permite alinhar o conteúdo
dentro da lista. Para isso,
use o estilo do contêiner de conteúdo que também é suportado pelo FlatList e,
portanto, aqui, também podemos apontar para a lista de estilos e, portanto, isso agora deve funcionar como
nossa exibição de rolagem antes.
Então, vamos tentar e você verá que começamos na parte inferior aqui e agora podemos começar a adicionar itens.
Agora vamos ver se a rolagem também funciona como
deveria, sim, funciona e podemos ver o item mais recente e o item mais
antigo. Sim, há algo errado com o posicionamento dos itens no item
da lista e voltarei a isso, mas geralmente, isso funciona. Vamos testá-lo também no Android, então vamos
começar a adivinhar
e torcer para que não resolvamos isso muito cedo, não, que
funcione e
aqui, também podemos rolar como você pode ver. Portanto, isso também funciona com o FlatList.
Agora, e quanto a essa estranha distribuição de conteúdo aqui nos itens de nossa lista?
Bem, você notará que os itens da lista são maiores do que eram antes.
O conteúdo é distribuído como se o item da lista terminasse aqui e esse é realmente o problema.
Temos uma largura de 60% do item da lista e nosso conteúdo respeita isso, mas nossas
fronteiras estranhamente não.
Para corrigir esse comportamento estranho do FlatList, o que você pode fazer é acessar o contêiner da
lista que contém a lista geral e definir a largura para a largura da lista desejada no final, como digamos
60% e dar uma largura aos itens da lista de 100%.
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
mesma largura e, uma vez
que raramente é necessário o caso de uso em que o contêiner de lista precisa ser maior que os
itens da lista, porque o que mais seria lá no contêiner da lista, essa deve ser uma boa solução.
Agora, se você fizer isso, notará que a largura parece melhor, mas, na verdade, o posicionamento agora é um problema.
Bem, como agora temos a largura controlada no contêiner de lista externo, podemos nos livrar do
alinhamento de itens centralizados aqui na própria lista; portanto,
lembre-se de que foi o estilo adicionado ao estilo do contêiner de conteúdo.
Mantemos o estilo lá, mas eu removi o alinhamento de itens no centro, porque
não há nada para centralizar agora, temos a largura definida no contêiner
da lista e não nos itens da lista. Portanto, graças a eles terem 100%, eles são centralizados automaticamente porque de
qualquer maneira, a largura total e, portanto, agora,
se fizermos outra tentativa, isso parece funcionar muito melhor e os itens da lista são realmente dispostos da maneira que deveriam ser.
Portanto, se tivermos outro por aqui que talvez demore um pouco mais, sim, com boa aparência,
então aqui podemos ver que temos o mesmo comportamento de antes, temos o estilo agradável e também trabalhamos com
esse comportamento diferente que o FlatList nos fornece. Vamos experimentar o Android aqui e iniciar um
novo jogo lá,
oh, isso não será um
jogo longo,
o suficiente, então também funciona tudo como deveria.
E é assim que você pode fazer isso com o FlatList, pois, como você vê, funciona de maneira um
pouco diferente, temos que contornar seu
comportamento diferente quando se trata de ajustar a largura dos itens da lista, mas, no final, isso agora também
funciona e portanto, agora você aprendeu a organizar suas coisas com o FlatList, com a exibição de rolagem, o que há
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
que desejar.