Um momento
Aula 08
Cursos / Pesquisa de Imagens com o React Native
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: