Quando se trata de estilizar uma lista, é claro que podemos estilizar os itens da lista e também a própria
lista.
Então, vamos começar com os
itens e aqui, na verdade, cortarei essa marcação aqui, por assim dizer, para que o código jsx de um item e
adicione uma nova função fora da função component, porque realmente não precisamos de nada dentro do
componente e nomearemos apenas esse item da lista de renderizações, o nome é com você.
É uma função e essa função no final deve retornar algum código jsx aqui, portanto,
deve retornar esse código jsx aqui e para funcionar corretamente, é claro que é preciso obter digamos
o valor que queremos gerar.
Então, aqui, usarei value como uma chave e o valor de saída aqui entre as tags de texto e agora podemos
usar o item da lista de renderização lá em baixo
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
isso como um valor em um item da lista de renderização.
Agora, se fizermos isso, veremos o mesmo resultado de antes,
portanto, nada muito sofisticado aqui, mas agora temos uma marcação mais enxuta lá embaixo, um código jsx mais
enxuto lá em baixo e temos nosso código jsx do item de lista aqui.
Agora podemos estilizar isso e, é claro, eu quero estilizar minha visualização aqui, para isso, adicionarei um estilo aqui
da folha de estilo, que vou nomear a lista e lá, na verdade, agora
quero ter dois itens de texto e um deve ser o número da rodada e
o segundo deve
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,
como o
nomeio aqui e quero gerar isso dinamicamente aqui,
talvez com esse símbolo de hash na frente dele apenas por razões estilísticas.
Portanto, agora temos esses dois textos nesta lista aqui e ali, na
verdade, não quero usar o texto, mas o corpo, para que eu tenha meu estilo de texto padrão.
Portanto, para isso, vamos importar o texto do corpo dos componentes e usar o corpo em vez do texto normal
aqui em nosso item de lista. Com isso, estamos usando a fonte correta e
agora vamos adicionar esse objeto de lista à nossa folha de estilo para que possamos estilizar o item de lista; na verdade, isso deve
ser chamado de item de lista, portanto, e não de lista.
Então, vamos adicionar o item da lista à
folha de estilo agora, assim e agora, é claro,
podemos estilizá-lo da maneira que você quiser, vou estilizá-lo de uma maneira relativamente fácil aqui, basta dar uma cor de
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
de 10, para que tenhamos um espaçamento
entre os itens da lista e eles não fiquem bem próximos um do outro. Uma cor de fundo em branco
talvez e, claro,
você pode usar cores diferentes aqui, se quiser.
Agora que é o começo,
agora, quando estamos definindo uma cor de borda, também precisamos configurar a largura da borda
aqui, caso
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
de texto ficam próximos um do outro e não acima um do outro, o que seria o padrão,
porque um modo de exibição usa flexbox e usa uma direção flexível da coluna para que o item
fique ao lado do outro em um eixo horizontal, adicionamos linha de direção flex aqui, assim.
E com isso, se salvarmos isso e o aplicativo reconstruir, vamos tentar e ver como isso
se parece, sim, que parece bom, mas ainda há espaço para melhorias.
Por exemplo, quero definir uma largura nesse item da lista para garantir que ele não seja tão largo
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
item,
mas se fizermos isso e configurá-lo como digamos 80%, você verá que isso não se comporta da maneira que você deseja
que se comporte corretamente, então não
parece certo, agora o conteúdo
foi movido de alguma forma, mas o item em si certamente não é mais amplo. Para estilizar uma lista corretamente, a melhor
maneira é simplesmente envolvê-la em uma exibição e depois estilizá-la.
Então, aqui, podemos adicionar
uma visualização, dar um estilo de lista
digamos, então aqui estou me referindo à lista de estilos e adicionar esse objeto de lista à nossa folha de
estilo agora, assim e nesta lista, agora podemos definir uma largura de 80% e livre-se da largura aqui no item da lista.
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
é apenas algo para estar ciente.
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
da lista, também
não o adicione necessariamente diretamente à exibição de rolagem, por causa de como isso funciona internamente, mas em vez
disso, basta envolver uma vista em torno da vista de rolagem, onde você define a largura e a altura desejadas.
Agora, o que você notará é que, no item da lista, seria bom se tivéssemos o número
da rodada sendo produzido lá e tivéssemos algum espaçamento entre o número da rodada e nossa estimativa real
e para conseguir isso, para um que precisamos
definir como um estilo aqui no item de lista, podemos definir justifyContent que controla como o conteúdo dessa visualização é disposto ao longo
do eixo principal, que reflete a direção como o eixo horizontal e, lá, usarei espaço ao redor para distribuir
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
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
um segundo argumento nessa função que o mapa chama automaticamente e esse é o índice do item que
estamos produzindo,
para podermos encaminhar esse índice aqui para renderizar o item da lista ou o índice mais 1, pois ele começará em 0
e provavelmente queremos imprimir um para a primeira rodada em vez de 0.
Agora, com isso fora do caminho, se adicionarmos isso, agora isso parece um pouco melhor e talvez possamos realmente mudar esse visual
aqui de um espaço para outro, acho que fica melhor, mas antes de salvar e atualizar
isso, você Observe também que um dos seus problemas é que o número da rodada não está realmente
correto.
A primeira rodada é a mais baixa, porque adicionamos novas rodadas no início da lista; portanto, o índice
não é a medida correta para o número da rota, porque o índice é sempre 0 ou, se adicionarmos 1, será 1 para
a primeira lista. item, mas o primeiro item da lista não
é realmente a nossa primeira rodada. Em vez disso, como
adicionamos novas rodadas como o primeiro item da lista, o primeiro item da lista é a nossa rodada mais recente
e, certamente, não a primeira.
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
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,
o número da rodada correto para um determinado item da lista.
Então, agora, se fizermos isso e reiniciarmos, agora veremos que a rodada número um é o palpite sete e que
permanece o número um se
adicionarmos outro palpite e agora isso parece funcionar corretamente aqui.
Você também verá que, assim que ultrapassamos nossos limites aqui, é claro que podemos rolar a lista e
isso também parece funcionar da maneira que deveria.
Vamos também experimentar o Android aqui, começar um novo jogo lá e esperar que não ganhemos muito
cedo, sim, isso parece funcionar,
mas lá, na verdade, não consigo rolar.
Portanto, no Android, isso não está funcionando corretamente, essa lista
não pode ser rolada lá.
Então, o que há de errado no Android?
Agora, enquanto ele rola bem no iOS, para que
a exibição aninhada em uma exibição também role no Android, verifique se a vista ao redor realmente usa o flex
one; portanto, adicione-o ao estilo de
lista aqui, que é o estilo aplicado a a vista envolvida na visualização
de rolagem.
Com isso adicionado, se agora tentarmos novamente no Android, você
perceberá que agora pode ser rolado assim que ultrapassar os limites da tela e no iOS, ele ainda
funcionará como antes e, sendo o iOS,
podemos mesmo rolando sem exceder os limites, esse é apenas
o comportamento padrão do iOS que você pode equilibrar um pouco nessas listas.
Então agora temos essa lista rolável aqui com visualização e mapa de rolagem e funciona no Android e no
iOS.