Resumo do Vídeo sobre Desenvolvimento de Componente de Listagem de Imagens

No vídeo passado a gente terminou de fazer o componente search bar para fazer essa caixa de pesquisa e com um botão sensível toque a gente usou o text input e um touchable highlight a gente vai usar essa caixa de busca para procurar imagens do servidor externo usando a API e vai ser da Microsoft do Bing vamos voltar a wireframe para ver como é que a gente vai continuar esse projeto do look e então a gente fez a text input com touchable highlight quando a gente clicar buscar a gente vai mostrar uma lista e cada linha cada item dessa lista será uma imagem com uma breve descrição então a gente está falcando nesse primeiro componente essa primeira cena aqui depois a gente vai fazer a outra cena que você clicar a gente vai usar o navegador para empilhar essa nova cena com uma imagem e tem um botão para voltar que volta para outra cena original agora vamos focar a fazer essa lista de imagens vamos primeiro fazer esse item aqui o item da lista e com o item da lista a gente pode fazer o outro componente que vai ser a lista toda agora para fazer esse componente aqui a gente não precisa manter o estado então a gente vai fazer um componente funcional chamado functional component inglês então vamos lá a gente só vai precisar de uma imagem ou image component componente de imagem e o texto text vamos voltar aqui vamos fazer o image list item né aqui a meu parte de componente a gente vai fazer esse aqui então começa um importando os modulos que serão necessários primeiro sempre react né port react from react e como vai ser um componente funcional eu não preciso importar o componente aqui então agora vão importar qualquer coisa que precisar do react native nesse caso a gente vai precisar do image no text e talvez um bio né para o de dois agora a gente fez todos os importações dos dos modulos agora vamos definir o componente botar um const o nome do componente e é igual uma função tá bom eu vou botar a função de flash e o argumento dessa função é sempre as props as propriedades que serão dadas quando você criar um componente image list item tá bom aí a gente retorna return o template o que nós queremos mostrar na tela nesse caso vai ser só a um vai ser esse aqui né então vamos botar um a view uma imagem e um texto dentro vamos lá botou um view uma imagem e um texto né vamos só botar a descrição só mais a gente vai mudar depois para usar os dados que serão dados via a props né a imagem tem a propriedade source que é a fonte da imagem qual é vamos botar só para que a gente ainda não tem e isso vai ser o image list item componente mais básico aqui aí para esse componente ser usado em outros arquivos a gente precisa exportar então vamos dar um export default image list item tá bom agora para usar esse componente vamos aqui e definir o image list o outro componente que vai ser o container né para todos esses itens nesse caso eu vou fazer um componente que manterá um estado que irá manter um estado vou usar uma list view o componente de list view depois agora não mas depois vou usar então vou precisar manter o estado vamos lá import react como a gente vai fazer o componente de estado component em inglês eu vou botar o componente aqui eu vou destruct destruct structuring vou destruturar o componente que é parte do módulo do react esse arat aqui então a gente não precisa digitar react.component todo o tempo né agora a gente vai precisar de alguns componentes do react native import alguma coisa from react native bom a gente vai usar um list view depois então só vou botar aqui só para ter mas ainda não iremos usar agora vamos definir o componente vamos fazer um class nome do componente image list extends component sempre para o component vamos ter render function a função de render né sempre todo componente de render e render retorna o template nesse caso vamos botar no view aqui com uns itens como estou usando o view vamos adicionar a lista de módulos importados vamos só fazer um vamos botar uns componentes image list item aqui só para ver o que acontece eu vou duplicar o tal cinco como a gente está usando esse cara e não vai saber o que é até a gente importar image list item from como está no próprio diretório como o image list eu vou usar o ponto e o e barra né image list item e não preciso dar a extensão js agora vai saber o que isso é e para a gente usar esse componente em outros arquivos sempre exportamos pode ser aqui no final export a foto image list ou eu posso botar aqui né então vou botar aqui antes da classe para já exportar quando definir a classe agora vamos usar esse image list na nossa index depois da search bar vamos adicionar image list e como não sabe o que é not the find vamos importar import image list from components image list né não está dentro do component porque a gente está no index aqui então tem que ir para components e esse aqui salvar da um hot reload ali atualizando está aí então aparece descrição descrição descrição descrição então vamos avisar o que está acontecendo aqui aqui quando minha aplicação roda né esse que é o primeiro componente a cena inicial a cena inicial e tem um ovio que o conteúdo é um componente de bar seguido de um componente e o mesmo é esse componente de bar está aqui dentro da pasta a gente mantém os componentes na pasta components e a gente definiu nos vídeos passados o componente de bar que é o um basco um tax import e um touch ball highlight aqui que a gente vai usar para fazer uma busca por imagens agora o image list é o componente que a gente acabou de fazer aqui componente de estado por que a gente tá usando a classe e mais adiante vamos usar o o list view e usar o estado para armazenar os dados da lista. Mas agora a gente só está usando um image list item componente desse aqui só para ver o que acontece. A gente ainda não usou o list view. Aí o image list aqui retorna um view que tem cinco componentes image list item. Image list item a gente definiu como componente funcional que não mantém estado. Então a gente não precisa escrever classe, só escrever uma definição do variável com uma função aqui. E a função retorna o template. E template só tem uma image que está novo agora e um texto.