Aula 15
Definição de Constante para Cenas do Navegador e Clique do Item de Lista
Summary
Sure! Here’s a summary of the transcript in Markdown format:
## Resumo do Transcrição
A discussão aborda a configuração de roteamento em um componente de navegação. O erro inicial foi identificado como relacionado ao uso da propriedade `initialRoute` em vez de `initialSIN`. Após a correção, o código passou a funcionar adequadamente.
### Principais Pontos
- **Propriedades do Componente Navigator**:
- **`initialRoute`**: define a rota inicial.
- **`renderSIN`**: uma função que determina qual componente deve ser renderizado com base na rota.
- **Função `renderSIN`**:
- Recebe dois argumentos: `route` e `navigator`.
- A estrutura de controle `switch` é usada para renderizar o componente correto com base no `id` da rota.
- Um `default` é definido para redirecionar para `home` em caso de outra rota não especificada.
- **Teste de Rotas**:
- O teste de rotas funcionais (home e imageDetail) foi bem-sucedido.
- Um procedimento para lidar com rotas não existentes foi implementado, redirecionando para a rota padrão.
### Definindo Constantes
- Foi sugerido o uso de constantes para as rotas, evitando erros ortográficos.
- Exemplo: `const home = "home";`
### Implementação de Navegação
- A navegação entre componentes foi discutida, especialmente como clicar em itens da lista deve levar a um novo componente.
- O `TouchableHighlight` foi utilizado para tornar elementos clicáveis.
### Detalhes para Navegação
- Cada item na lista é renderizado como `imageListItem`.
- Para a navegação funcionar corretamente, o `navigator` deve ser passado para os componentes corretos.
- A propriedade `itemClick` foi implementada para registrar interações de clique nos itens da lista.
### Passagem de Dados entre Componentes
- A função `itemClick` agora registra qual item foi clicado e o objeto do item clica é passado para a próxima cena.
- A cena de destino irá utilizar a URL da imagem do item clicado.
### Conclusão
A estrutura de navegação foi corretamente configurada, permitindo a navegação entre componentes e o envio de dados relevantes entre eles.
This summary captures the key points and overall progression in the transcript while being formatted in Markdown for clarity.
Video Transcript
Então, não problema aqui, desculpe, a propriedade não é a initialSIN, a initialRoute.
Vou olhar aqui na documentação, navegar.
RenderSIN e initialRoute.
Não é a initialSIN.
Por isso que está dando erro.
Vou até aqui atualizar.
Aí funcionando agora.
Um, dois, três.
Está tudo OK.
Então, componente navigator tem duas propriedades.
InitialRoute, renderSIN, renderSIN é uma função que é usada para determinar qual rota, qual componente vai apresentar a cena.
Nesse caso, como você tem a initialRoute com esse objeto, cujo propriedade e d tem valor home, que acontece esse objeto é na verdade o argumento route da função que a gente fez.
Na função renderSIN tem dois argumentos, o route e o navigator.
Dentro do route, na verdade é um objeto, como a gente passa a initialRoute, passa o id para ser home, então dentro da route tem uma propriedade id.
Nesse caso, vai ser home e quando chega aqui no switch, vai ser o caso home e vai retornar o componente home.
Aqui está aqui.
Se você notou, eu uso switch sem usar o break aqui, porque eu estou dando retorn, se você der o return, automaticamente vai sair do switch, então não precisa do break.
E dê um default se eu botar qualquer coisa que não seja imageDetail ou home, vai por padrão ir para home.
Nesse caso, vamos testar o imageDetail, ver se está funcionando.
Se vai para o imageDetail, não está definido, porque a gente não importou.
Então aqui vai aqui port imageDetail from components imageDetail.
Tudo ok, se o ver está aqui, porque está sem estilo, mas está aparecendo.
Então, se a rota para o home e para o imageDetail está funcionando, vamos testar uma rota que não existe.
Vai por default e é o home, né?
Dito e fake.
Agora, normalmente, quando você declara essas rotas, essas coisas assim, se a gente normalmente define constantes, então vou definir o constant aqui.
E será, na verdade, esse home.
Em vez de falar home, ou falar só home, nesse caso, não tem jeito de se eu fizer um erro ortográfico.
Se eu, sei lá, esquecer uma coisa, não vai dar problema.
Sempre vai ser imageDetail.
Faz um constante.
ImageDetail.
Aí, salva, é ver se funcionou, não doeu, é tudo ok.
Então, a navegação inicial já está configurada, só falta a gente ver como vai navegar esse componente para o outro,
quando a gente clicar um dos itens na lista.
Então, vamos ver aqui na componente home e tem lista, cadê?
Lista aqui.
Lista, imageList e quando o imageDetail, list aqui.
Então, renderRow cada linha é um imageListItem.
E está aqui, é um vilain.
Agora, vamos fazer a view ser clicável.
Vamos para touchable, highlight.
E ver.
Agora, o item inteiro é clicável.
Home press vai ser nada agora.
Vamos auto testar.
Certo, buscar.
Então...
O por que deu erro? Esqueci de importar.
Touchable, highlight.
Agora, se eu clicar, parece um negócio preto do touchable, highlight.
Tudo ok.
Talvez eu queira por view e só deixar o touchable highlight dentro da view.
Sim, não vai mostrar o negócio preto fora da borra do view.
E acho que vai dar...
Vê o que vai dar.
Acho que eu tenho dois dentro do touchable highlight, talvez de erro.
Um, dois, três, o...
Pessoal, é deu erro.
Porque eu tenho que botar um view aqui.
Só aceita um filho.
Um único filho.
Ok, se clicar...
Agora, clica aí.
Tá bom.
Depois, as jeitas estilos, não vão importar agora.
Mas eu só quero um botão para clicar.
Então, a gente precisa do view porque o touchable highlight só recebe um único filho, mas tem dois.
Tem o text, tem o image, então ponho um view aqui.
Agora, quando clicar, a gente quer que ir para outra cena, navegar para outra cena.
Para fazer isso, a gente vai ter que passar o navegador aqui.
Esse cara, passar para esses componentes, home,
no momento que a gente vai fazer isso, passar uma propriedade chamando navigator, e vai ser o navegador.
Então, home vai receber a propriedade chamando navigator, e vai ser o navegador, próprio navegador aqui.
E se tiver o navegador, dá para fazer navegação.
E a...
Quando vamos para o home.
Home aqui tem que arranjar a maneira do home falar, do botão falar com o home.
E essa maneira, vamos fazer a mesma coisa que a gente fez, passando via props, propriedades.
Do home, passa propriedade para o image list, que vai passar propriedade do navegador para o list item.
Nesse caso, vamos fazer aqui no home.
Quando falar com item, clicar.
Vamos fazer alguma coisa.
Quando clicar em new item, vamos navegar.
Então, tem essa função que a gente vai definir, mas vamos adicionar para o image list.
Vou aqui na outra linha.
Propriedade, tem os items, item on.
Item click.
This.
Item click.
E eu acho que vou usar a palavra shavite, e dentro da função item click, vou dar o bind.
Agora dentro vamos passar um item click para o image list.
Agora o image list tem um render row, cada item vai ser o image list item, vamos passar
a propriedade.
Um item click.
Vamos ver.
Isso propriedade, um item click.
Ok.
E quando for no image list item vai ter como props também o item click dentro do props,
props.itemclick que a gente destrutura aqui.
E quando clicar on press a gente vai chamar o item click.
Mas quando clicar a gente tem que passar o item para outra cena.
Vamos a gente vai fazer isso.
Vamos fazer uma coisa aqui.
Um item click, só para ver se está funcionando.
Volta aqui, salva, volta aqui para o home, definiu um item click, dá um console log.
Item foi aplicado.
O navegador para o debugger, dá um clear.
E aqui.
Ok, então vou clicar em um item foi clicado, item foi clicado, item foi clicado, tá bom.
Mas qual item foi clicado?
Ainda não sei.
Então precisa saber qual foi clicado.
O que a gente pode fazer é passar o item que foi clicado com o argumento.
E aqui vou dar o console log do item.
Mas o que é esse cara?
Vamos voltar o image list item.
Quando chamar um item click vai passar o item com o argumento.
E aqui.
Volta.
E aqui.
Item foi clicado, item foi clicado.
Não tem nada, será que eu sabei?
Ah, salva, não salvei.
Tem um tempo, vamos para o atras, buscar, volta aqui, clear, clicado, item foi clicado.
Então esse cara foi clicado e clicar o outro.
Outro cara foi clicado, esse cara é o atras.
Então quando clicar eu já tenho um objeto.
Então vou passar esse objeto para outra cena.
E outra cena vai pegar esses caras aqui e usar a imagem grande.
Vê se é esse aqui.
Tem um nome de URL, tem o content URL.
Vê se é esse.
Aí, imagem grande é o content URL.
Essa propriedade que a gente vai usar para outra cena.
Então.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: