Um momento
Aula 17
Cursos / Pesquisa de Imagens com o React Native
Roteamento e Mudança de Cena com o Push do Navigator

Summary

## Resumo do Transcript

O trecho discute o processo de navegação em uma aplicação, detalhando a funcionalidade de um componente de lista de imagens. Aqui está uma visão geral dos principais pontos abordados:

1. **Componentes e Estrutura**:
   - O componente lista imagens (`image list item`) possui uma função de clique associada (`item click`).
   - Quando um item é clicado, essa função é chamada com o objeto do item.

2. **Navegação**:
   - A função `item click` é ligada ao componente pai (`image list`) e recebe uma propriedade de navegação do componente `home`.
   - A intenção é navegar para uma página de detalhes da imagem (`image detail`) usando a função `push` do navegador.

3. **Implementação de Rotas**:
   - Para realizar a navegação, é necessário definir as rotas em um arquivo separado (`routes`).
   - As constantes de rota são exportadas e importadas corretamente nos componentes necessários.

4. **Erro de Contexto**:
   - Ao tentar usar o contexto de `this`, há um erro mencionado relacionado a `push` e ao uso do `bind` para corrigir o contexto no manejador de cliques.
   - O autor tenta resolver o problema de contexto e navegação, mas encontra dificuldades em implementar corretamente a passagem de props.

### Conclusão
O transcript explora a configuração e navegação entre componentes em uma aplicação, destacando erros de contexto e a organização de rotas. O autor busca uma solução para a navegação sem perder o acesso às propriedades necessárias.

Video Transcript

Então, vamos aqui, já fizemos image detail, pegar o nome e contar URL que são dados com prop, agora o que resta fazer é voltar aqui e dar o navegador. Aqui tem o home, é a página principal inicial, vamos no home, quando clicar o item, o item foi clicado, o que a gente vai fazer aqui é falar des, então, quando clicar em um dos itens, se lembra aqui o image list item, quando clica no item, chama a função item click com o objeto que é o item, o item click é dar com propriedades do pai do image list item, que é o image list, o image list usa o props um item click que é dado do home, aqui, do home image list dado um item click que finalmente chama a função um item click e tem foi clicado, agora em vez de falar só o console log, vamos navegar para aquele image detail, o que a gente vai fazer como navegar é falar des, navegador, tá bom, para acessar o navegador, lembre que no index a gente passou o navegador com propriedade, então, des, prop, navegador, des, prop, navegador, tem acessar o navegador e para outra cena a gente vai usar a função push e a gente push com o objeto, o objeto será route, tá bom, argumento a, tá ai, é o route, então a gente vai passar o id com o qual é a route image detail, mas como a gente não tem isso a gente pode importar do index e ou pode pegar esses rotos e pôr no arquivo diferente, vamos fazer o arquivo route, eu vou falar routes, só routes, vou pegar esses consts e vou por aqui mas eu vou exportar export const, tá bom, então esse aqui vai ter todas as constantes para a rota e volta o index mas não sabe o que é isso, então vou import o que, importo home, you image detail from routes, assim vai importar esses caras destruturado dentro da routes, porque quando você faz o export aqui vai criar um objeto assim com home e com image detail, mas vamos com esses caras aqui definidos home add server, então para extrair cada propriedade usa o chave, e aqui do home eu fazer a mesma coisa, precisar da image detail, se precisar é só importar, import image detail from routes, sim, salvo, na verdade route constants, mas tá ok, o que que deu, não deu do final, porque eu esqueci que é um, dois pontos, porque estamos dentro de componentes, aqui o didetório de cima, ok, dois pontos, ok, agora então vamos ver aqui, e também se a gente for a rota, vai dar o push, vai entrar e ir para outra cena de image detail, mas não vai saber o que é o props, então vamos tentar fazer isso, porque, ah, vai ser, o que acontece, clicar, clicar, agora, não, le, push, over define, ah, porque, estou usando des dentro do item click, vamos ver um item click, quando é chamado, tal bind des, tal bind des, mais um item click, push, over define, vamos ver, home, estou passando navigator, pro home, propriedade, disto props, da navigator, deve estar lá, mas não tá, o contexto da palavra chave provavelmente está errado, mas eu deu o bind des para acertar o contexto desse cara, pro home, mas ainda não deu certo, porque
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: