Transcrição Resumida

Agora, até agora, a gente tem essa cena aqui, componente pesquisa de imagens, né? O que é que eu quero fazer agora, antes de implementar o navigator, para poder mudar de cenas para ir para outro componente? A gente vai pegar esses componentes aqui e fazer um novo componente que vai ter pesquisa, parte de pesquisa e a lista de itens. E o componente de pesquisa de imagens, que é o index, o arquivo index, vai ser responsável só por ter as rotas e por ter o navigador servindo, no servino. Então, vou aqui no componente, eu vou criar um novo arquivo chamado home, que vai ser só as coisas que a gente já tinha no pesquisa de imagens. Então, vou fazer do zero, importar o react e componente também de estruturar dentro do módulo react from react. Vamos importar as coisas do react native from react native, oops. E vamos também class home extends component, cria class no nome do componente home. Deriva do componente, vai ter a random function que retorna o template. E export export default home. Aqui no index, eu só copiar o que a gente vai precisar. Contar o sheet, o text, o fill. E o que é mais. API endpoint, API key. Vamos ver. Precisa do construtor. Vou copiar. Vai ser o mesmo. Não precisa de componente no meu mount aqui, remove. Onsur Submit, recortar, colo aqui. E render vai ser o recortar. E vou aqui. As stylesheet também. Vou copiar. Vou aqui no final, antes de export default. Então, vou remover esses. Estilos aqui. Nada aqui no construtor, talvez não precise. Ah, esses aqui. Precisa aqui, voltar, antes do home. Porque eu estou fazendo patch e não tenho preciso do app. API endpoint e a chave. Então, no return, eu vou por home. E como tem home, a gente precisa importar. Port home from directory, presente, components. Home. Salvar, salvar o home. Vamos ver se deu certo. Seu spa não era venido porque... Aqui e aqui. E recortar do index. Esses aqui. Recorte esses componentes que só são presentes no home. Volta aqui. Cola. Salva. Solve o módulo que aconteceu. Search bar. Ah, porque a gente está dentro da pasta components. E o home está na mesma pasta que os outros componentes. Então, não precisa mais ter esse barra components. Emovir. Porque o home está no mesmo directory dos outros componentes. Salva. E ver aqui. Eu quero que eu fizes o data aqui. Aí. Um, dois, três. Aí. funcionando. Tudo ok. Então, o que a gente fez? A gente moveu as coisas que estão... Tinha no index. Moveu para o componente home. É quase a mesma coisa. Porque aqui vai ter o home. Talvez não precise desses aqui. Aqui no index a gente vai usar o navigator e a gente vai definir as rotas para o aplicativo. Só isso. E dependendo da rota vai incluir o componente apropriado. Componente home se for a rota para home. Ou o componente image detail se for o... O rota de image detail. Então, para isso eu vou usar o navigator. Navigator importar aqui. Então, o navigator precisa de render scene. E precisa da initial, né? Qual é a cena inicial e qual é... Como vai renderizar cada cena. Aqui a gente vai definir... This render scene. Vai definir a nossa própria função que vai ser o render scene. Render scene. Nesses casos render scene pega como argumento o navigador. Sempre. Na initial scene a gente pode definir a rota inicial. Vamos deixar sem nada agora e vamos definir render scene aqui. O render scene só fazer um switch com route. E pode escolher qualquer propriedade do route. Eu vou chamar de id. E dependendo do id vai rediracionar para a rota. Que isso vai chamar home. E para se o id for home, vamos retornar home, componente home. Se for... Image detail. Retorn o componente image detail. Se quiser adicionar o default, se não for a nenhuma rota, pode adicionar só para ir para home. Aqui a initial scene, vamos passar um objeto com id home. Fire Some Time,