Resumo do Transcript

quando eu passo a propriedade item, eu tenho que usar. Então aqui vai passar, assado props, o que eu vou fazer? Eu vou botar aqui de novo, vou fazer um destruction, destruturar, é o props, item. E aqui eu vou por URI, se a gente quiser adicionar um image, o fonte da imagem, se for da web, tem que pôr esse objeto com a propriedade URI e vou botar item URL, né? Desse cara. Ah, desculpa, esse aqui não tem isso. E aqui descrição vai ser o item, descrição. Tá bom? Salvar, voltar pro image list. Antes de salvar aqui tem um detalhe, quando você faz um map com coletânea e gera vários componentes, o react nero e pede um aqui propriedade de que? Se você não pôr vai ficar reclamando. Então vamos ver o que acontece aqui. Se eu te mostrar aqui, não dá pra ver na tela aí, mas tem um warn here, hit child in anarray, should have a unique key prop. está dizendo que você precisa de uma propriedade key para cada pilho de elemento da array, né? Então eu só vou usar o o ID do item. Porque é único, único, né? Não tem igual. Cada item tem um ID diferente. Então isso vai ficar OK. Ah, só note que a imagem não apareceu porque a gente não pôs as dimensões. Porque a imagem da web põe um pôr aqui image, põe um estilo. Estar as imagens, vou criar. Imagem, vou pôr uma width, sei lá, e uma height, vou dar um quadrado. Está aí, né? Está muito grande, vamos colocar 6464. Está aí melhor. Note que agora está tudo. O que aconteceu aqui, a descrição não está do lado, mas está debaixo da imagem. Porque vamos ver essa view. Essa view aqui note que não tem uma flex direction. A flex direction não está definida. Então por padrão é column e column o extra vertical é o principal. Se a gente quiser mudar, é só mudar aqui essa view que é o item. Eu vou adicionar flex direction para ser row, para os itens se alinharem coluna por coluna. Está bom. 1, 2, 3, 4, 5. Agora está melhor. Ainda tem uns problemas aqui com o estilo, o layout, mas está tudo ok no termo de fontesonalidade. É esquecido a vírgula aqui. Se você quiser, vamos adicionar uma margin right, dessa imagem para que o texto não apareça ao lado, muito perto. Sei lá, 6. Ou 12. Está bom. É um detalhe aqui também que eu fiz isso, mas tenho uma maneira mais de digitar menos. Normalmente o argumento para essa função de flash que define o componente funcional aqui é a props. Mas se você quiser pegar uma prop que você já sabe o que é, nesse caso a props só tem o item que a gente tem interesse. Então a gente pode fazer isso e eu vou destruturar o item da mesma maneira que eu fiz aqui, eu posso fazer aqui um argumento da função e dessa maneira eu vou ter item disponível aqui sem precisar digitar isso. Está bom? Tudo normal, sem problemas. E se você tiver se outro, usar só o pô aqui. Para destruturar. Agora voltar aqui. Vamos revisar o que aconteceu. Aqui no nosso componente principal, ponto de partida da aplicação, a gente definiu uma coletânea de itens e cada item é um objeto de JavaScript e propriedades id, url e descrição. Criamos cinco objetos para representar cinco imagens de cachorro e o que a gente fez foi passar os itens como a propriedade chamada itens e a propriedade chamada itens. O imagens de itens pegou essa propriedade que está dentro do props e a gente pegou e extraiu os itens. Fez um map para gerar imagens de itens, componentes de imagens de itens e passamos o cada item os dados do item aqui como propriedade chamada item para o item de itens. Temos que adicionar, nós temos que adicionar a propriedade aqui porque o React Native reclama se não tiver uma coisa para representar um tipo de id para cada indivíduo. Então, o imagens de itens, cada item, a gente só, aqui no return, no template, só passou o array e a gente já colocou o item de itens. Só passou o array que o React Native já reconhece e vai mostrar todos os itens da lista. Cada item tem a props, tem o item, tem aqui, mas, nesse caso, a gente só se importa com essa propriedade item e a propriedade a gente extraiu do props e usou para definir o source da imagem e a descrição do item. A imagem, né?