Aula 18
Debug e Mais Implementação da Mudança de Tela com o Navigator Push do React Native
Summary
# Resumo do Problema e Soluções Implementadas
O autor do transcript está enfrentando problemas com o gerenciamento de rotas em uma aplicação, especificamente no componente `index`. O problema principal é que o objeto `navigator` não está sendo passado corretamente para a tela inicial (`Home`), o que provoca erros.
## Problemas Identificados
1. **Navegação**:
- O componente `initialout` não está recebendo o `navigator` porque não foi passado como prop.
- Em vez de retornar uma rota desconhecida, o autor decidiu redirecionar para a tela inicial (`Home`).
2. **Propriedades Não Definidas**:
- Durante a navegação, ao clicar para acessar o `ImageDetail`, ocorre um erro devido à ausência da propriedade `props.image`.
- O autor constatou que, ao dar um `push` para a nova cena, nenhuma propriedade estava sendo passada.
## Soluções Propostas
1. **Passagem de Props**:
- Foi decidido utilizar a propriedade `pass props` para enviar as propriedades necessárias ao novo componente. Para isso:
- O item (imagem) foi renomeado para ser passado corretamente.
2. **Atualizações no `index`**:
- O `navigator` e `route` também precisam fornecer `pass props` e garantir que as propriedades corretas sejam injetadas no `ImageDetail`.
- O uso do operador de espalhamento (`...`) foi sugerido para copiar todas as propriedades do objeto de `pass props`.
3. **Estilização**:
- Após implementar a correção, o autor prosseguiu para estilizar a tela de detalhes da imagem, mencionando a adição de um style sheet e a necessidade de importá-lo.
Ao final, após as alterações, o autor conseguiu realizar a navegação para a nova cena onde o nome da imagem foi exibido corretamente, embora ainda faltassem estilos.
Video Transcript
Meu problema é na verdade na index, nas rotas, se você notar, eu pus navigator pro home né, mas initialout vai bater aqui, que não tem navigator passado com props, por isso que não tá dando certo.
Então, em vez de fazer essa rota desconhecida, vou futar home. Agora vai bater aqui e é passado o navigador pro home.
Vamos lá, home, vai chamar a scatter, deixa eu tirar. Eu dei um console log do props, só pra ver o que tinha.
Em ABC, vou voltar aqui. 1, 2, 3, clica. Agora o objeto console log do props deu o navigador.
Então, vamos lá. Volta aqui, tirar esse console log, o item foi clicar, o argumento é o route.
Então, vai dar o push com o image editor. Vamos lá ver se eu dá o push.
Clicquei. Clicquei. Não pode ler o nome do property. Então, a propriedade não está definida.
E é verdade, se você ver o image detail, a gente espera que tenha um props.image.
Na verdade, não tem nenhuma propriedade passada quando a gente dá um push nessa nova cena.
Então, a gente tem que fazer pass props. A gente tem que passar as propriedades.
Então, aqui eu vou usar essa propriedade chamada pass props pra passar as propriedades pro componente.
Quando a gente dá o push, empilhar na stack, né? Na pilha. Vamos dar o pass props e vamos passar o item.
Nesse caso, a gente chamou de imagem. Então, a propriedade que será injetada tem nome e imagem, que é o que a gente quer.
Props.image. E vamos passar o item. Agora, pra isso funcionar, teremos que voltar ao index.
Também passar o navegador e o route.pass props, né?
Lembra que esse objeto é, na verdade, o route. E pra passar o pass props pro image detail dentro do route,
quando bater no image detail, você tem que dar o pass props.
Então, se pass props vai ser esse objeto aqui, mas a gente tem que copiar todas as propriedades do pass props
para as propriedades do image detail. A gente vai usar o operador de três pontos.
Tá bom?
Nesse caso, os três pontos vão pegar todas as propriedades do objeto pras propriedades e injetar no image detail.
Por exemplo, no nosso caso, é como se fosse, aqui, aparecer o image como o objeto da imagem, que tem qualquer coisa.
Agora que a gente deu pass props e passou o item, vamos ver.
Vamos ver.
A você...
Ok.
Não tem o nome direito, mas eu não sabia. Salvado agora.
O demora. Ah, valeu, esse...
Espero que a API não chegue no limite de pedidos.
Clicei e foi pro nova cena, que está sem estilo, mas você pode notar que o nome está aqui, método, ABC, blah, blah, blah.
Então, vamos dar um estilo agora.
Image detail, vamos adicionar a spreadsheet aqui.
Style, spreadsheet, create e dar os estilos. Temos style sheet? Não, adicione no import.
Agora vamos dar um estilo pra... pra vivo.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: