Resumo do Transcript

Em vez de mostrar a mensagem carregando todo o tempo, a gente deve inicialmente mostrar a mensagem como por favor entre uma pesquisa ou uma coisa qualquer. Então, o que a gente pode fazer é vai lá aqui no index e no componente de pesquisa de imagens inicia o state, o estado com uma propriedade chamada buscando, que inicialmente vai ser false. Então, inicialmente não estamos buscando nada. Então, quando a gente clicar no buscar, vamos setar o estado para o buscando para ser true. Então aqui, quando clicar no botão, e é, vai ser essa função, sort, submit, files de set state, buscando para ser true, porque a gente clicou e fez um pedido para uma busca e a gente vai aqui no componente, pode usar o operador oternário, a gente vai ver se se o buscando for verdadeiro, mostre o componente e, em meu list, se não, mostre um texto chamado, por favor, uma pesquisa. Então, quando inicialmente o estado tem a propriedade buscando, que é false, então, esse cara vai ser renderizado. Por favor, entre uma pesquisa. Estua utilizando aqui, por favor, entre uma pesquisa. Digitar alguma coisa, quando clicar em buscar, vai chamar um sort submit, que vai setar o estado, e a propriedade buscando vai se tornar verdadeira. E, por causa disso, o componente, o operador oternário, vai retornar o imageless, que é o componente, é o listo de imagens. Vamos ver o que acontece. Mostre carregando, e, finalmente, as imagens. Está aí. Está assim, fica muito melhor para o usuário, para a experiência. E agora que a gente já concertou a busca, e pode buscar por qualquer coisa, vamos para o próximo passo, fazer outra cena chamada título da imagem, que quando clicar, a gente, quando clicar em uma imagem, que mostra o que acontece, o que acontece, o que acontece, o que acontece, o que acontece, o que acontece, Mostre uma imagem de tamanho maior. Nesse caso, a gente vai fazer um novo componente, precisar de novo componente. E precisa de fazer uma navegação, que vai ser feita com um componente navigator. Vamos aqui, criar um novo componente. E eu vou chamar de imedio de detail, detalhes. Vamos ver se deve ser componente funcional ou componente de classe. Eu só estou mostrando a imagem, e essa imagem vai ser de um URL, que vai ser dada como props. Então, a gente vai dar como props esse componente, a imagem, o item. Esse cada item aqui, quando clicar em um, vai passar como props para esse componente. Parece que não precisamos manter um estado. E quando clicar a volta, só volta para a cena anterior. Vamos fazer componente funcional, dar import, React, import, alguns coisas, de React Native. Vamos precisar de que tenha uma imagem, tem um botão, tem um texto, imedio. Vamos usar um touchable highlight, com o botão, sensível o atoque, e text. Talvez um view para ficar todos dentro. Então, define componente imedio detail, componente funcional, então não vou usar a classe, dá a função de flash, e esse porta no final. O argumento dessa função é as props, e muda os componentes. E aqui retorna o template, e vai ser, se todos os fins, vou mudar o view, vou mudar aqui do lado. Vou colocar um view, e dentro dessa view vai ter uma image, e tenta ver esse título da imagem, vou só colocar aqui, image, tem um source, propriedade, e agora vai ser no, a gente não sabe ainda. Tem um touchable highlight ali, dentro do touchable highlight sempre tem um text, o texto do botão, voltar, e quando você on press, vai ser alguma coisa, não está definida ainda. Bom, aqui é o image details, agora a gente precisa do navegador, para poder ver o que está no image details, só a gente pode voltar aqui, e, de baixo, em vez de ter esses dois, pode para o image details, só para ver se está funcionando. E como estou usando aqui, aqui, voltar e dar import aqui, import, em uns details, oponents, funcionando, agora não tem estilo, por isso que não aparece, o botão, e a imagem não tem nenhum URL. Então está funcionando, vou voltar aqui, e, reverter, e a gente tinha antes, repetir, search bar e o image list, vou tirar esses itens aqui, não precisamos mais, agora o próximo passo é fazer a navegação, e produzir o componente de navegador,