Aula 08
Uso do ListView para Permitir a Rolagem do Conteúdo da Lista de Resultados de Imagem
Summary
## Resumo da Apresentação sobre List View no React Native
O apresentador discute a implementação do componente List View em um aplicativo React Native. Inicialmente, a lista contém cinco itens, mas ao adicionar um novo item, a lista ocupa toda a tela, sem permitir a rolagem. Para resolver isso, o List View será utilizado para adicionar uma barra de rolagem quando houver muitos itens. Embora o Scroll View pudesse ser uma opção, o List View é mais apropriado para esse caso.
### Documentação e Propriedades do List View
O apresentador menciona a documentação do React Native e destaca as duas principais propriedades do List View:
1. **Data Source**: Fonte de dados para a lista.
2. **Render Row**: Define como cada item na lista será renderizado.
Ele explica que é necessário usar a função `cloneWithRows` para criar um objeto Data Source, passando um array de objetos e a propriedade `rowHasChanged`, que indica se a linha mudou (true ou false).
### Implementação
Durante a implementação, o apresentador sugere a modificação do componente existente para usar o List View. Ele menciona que o `Data Source` será parte do estado do componente e que a renderização de cada item deve usar o componente `ImageList`.
A implementação envolve:
- Definir o `Data Source` no estado do componente.
- Usar `super` nas props dentro do construtor.
- Definir o estado inicial.
O apresentador propõe que a função de renderização de cada item poderia ser extraída para sua própria função, mas isso não é necessário no momento.
### Conclusão
A transição para o List View permitirá uma melhor visualização da lista ao lidar com múltiplos itens, garantindo uma experiência de usuário mais fluida.
Video Transcript
E então chegou a hora da gente usar o list view, o componente.
Se você notou que agora a gente tem cinco itens nessa lista, mas se eu adicionar o
novo, talvez seis agora, outro outro cachorro. Vamos ver o que acontece. Agora está ocupando
toda a tela, não é? E não a maneira de a gente ir para baixo, dar um scroll aí, scroll lá, né?
Como se a gente está fazendo aqui, não tem essa barra aqui, né? Então vamos usar o list view
para poder, se tiver muitos itens, adicionar essa barra. A gente poderia usar um scroll view
para rodar toda a tela, mas a gente vai usar o list view. Vamos ir aqui, se você for a documentação
do React Native, KD, K, e na otra versão 0.03, aumentou por um. Aqui a documentação do list view
aqui, esse cara aqui, a list view vai, você tem duas propriedades, chamada Data Source e o Render
Source, o Data Source vai ser a fonte dos dados para ser usados na lista. E o Render Row é você
diz como é que cada item na lista será renderizado. Nesse caso eles só estão usando um componente de
text nesse exemplo. Então vamos começar, na hora de que eles estão usando o Data Source que está
dentro do estado, que é definir o que, esse Data Source aqui, o que é que eles têm que fazer?
Eles têm que chamar essa função clone with rows, porque eles têm que criar um objeto do list view
ponto Data Source e esse objeto, você tem que passar esse objeto do propriedade row has changed,
que é true or false, verdade ou false. E depois de criar esse objeto que ele chama os ds,
ele chama a função clone with rows e você passa os dados array, coletânea de cada item.
Nesse caso a gente vai passar um coletâneo de objetos. Vamos voltar ao componente e começar a fazer isso.
Vamos aqui no Image List, né?
O que a gente vai fazer? Vai usar o list view
em vez de ter esse list items.
Tenho Data Source e tenho render row, né?
Para o render row, a gente já fez aqui. A gente quer que cada item na lista seja renderizado
como um componente de Image List, né? Nesse caso a gente pode usar isso aqui.
Então vai ser uma função cada componente.
Em sondre flash, a gente retorna um Image List item, né?
A gente pode depois extrair isso para a sua própria função.
Nesse caso eu não preciso disso se tivesse um argumento.
E o Data Source. Vamos usar o estado.
Vamos definir esse Data Source.
O que a gente vai fazer é... Se a gente usar o estado, define o constructor.
Chama a função super nas props e define inicio e o estado.
Nesse caso vamos dizer que...
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: