Aula 06
Introdução ao componente Navigator
Summary
# Resumo da Transcrição
Nesta transcrição, o autor descreve o processo de criação e refatoração de um componente de botão em uma interface de navegação utilizando React.
## Principais Pontos:
1. **Criação do Componente de Botão**:
- O autor inicia a implementação de um botão que inclui estilos e texto (label).
- O texto do botão é configurado para ser passado como propriedade (`props`).
2. **Lidando com Funções de Navegação**:
- O comportamento do botão é ajustado para chamar uma função de navegação, permitindo que o usuário defina o que acontece quando o botão é pressionado.
3. **Importação e Definição de Estilos**:
- O autor descreve a importação do componente de botão e a definição de seus estilos utilizando `StyleSheet`.
- Depois de resolver problemas de importação, o botão é integrado à interface.
4. **Refatoração de Botões**:
- O autor refatora o código para simplificar a criação de múltiplos botões, reutilizando o componente de botão que foi criado.
- Um novo componente, `Botão Voltar`, é sugerido para evitar duplicação de código.
5. **Navegação entre Páginas**:
- O uso de `navigate` e `pop` é discutido, demonstrando como empilhar novas cenas e retornar à cena anterior.
- O sistema de navegação é organizado para facilitar a manutenção do código.
6. **Conclusão**:
- O autor encerra convidando os espectadores a deixar comentários e sugestões e encorajando-os a se inscreverem no canal.
## Observações Finais:
O vídeo tem foco em melhorar a reutilização de componentes e a clareza do código, incentivando práticas de programação mais eficientes e organizadas.
Video Transcript
ainda mas vamos fazer aqui no nav menu vamos copiar os status aqui, tá bom?
Põe aqui os tilos, não preciso do container, só do botão e text do botão né?
Já que tem assim já define já o botão, tá aqui e o texto do botão, tá bom?
E no onpress aqui vamos botar o texto, se eu fazer isso aqui melhor, então a gente
põe um retorno tothlatchable highlight que tem um estilo já definido aqui dentro
desse componente e tem o texto aqui, mas o texto a gente quer que o texto seja dado
pelo usuário seja dado externamente, então a gente vai botar props, vai dar como
props, em vez de ter o texto primeira página a gente vai dar pelo props, props.
Sei lá, pode ser placeholder, pode ser label, vamos falar label, o texto sei lá,
o texto do botão, pode ser qualquer coisa mas eu vou escolher label, então quando
também aqui no onpress eu não quero ir para a primeira página, eu quero que ele
que chama a função que é dada pelo props, então posso fazer isso, props onpress.
Bom, agora vamos voltar aqui a primeira página e o botão, eu falei placeholder mas eu quero
que chama de voltar e no onpress eu quero fazer o pop, mas o botão não está definido
ainda, então vamos adicionar no import, import, onde é que está o botão?
Está dentro do component, está dentro e é o botão, então é import.button.from.barra.components.button
E aí, e agora vamos... o que aconteceu?
Ah, a nepotvind.components.button, botão.js, style export default.button, esqueci de nada não,
style sheet, eu esqueci de definir e vou em style sheet ali, o bem que está acontecendo.
Unable to resolve module, import, botão.from.components.button, não problema.
Ok, então vamos voltar de volta, botão.from.barra.components, ah, esqueci, já estamos dentro do botão,
do mesmo diretório, então não precisa disso, components, está aí.
Eu apertei o negócio, aqui então, importei o botão, clica na primeira página, voltar está aqui,
mas o outro não está aparecendo, cadê o botão? Não salvei. Salvado, clica na primeira página, está aí o voltar.
Ah, bom. A razão de largura que está ocupando toda a linha é porque esse container que está no flex1 aqui
e está ocupando toda a linha, e esse aqui, se você ver o inspector, esses caras estão dentro,
não são stretch, não estão sendo elástico. Vê aqui, está justify content center, line item center.
E esse cara, vamos tirar.
Bom, agora vamos tirar esse aqui, que a gente já fez o botão, de volta, vou botar isso no nova linha, compress.
E agora vamos voltar para o nav menu para dar um refactor nesses botões aqui.
Então, esse cara aqui, a gente fez o botão, não é? E não precisa mais...
O botão tem um label que a gente chamou, a gente botou a primeira página e tem um onpress,
não precisa mais de estilo, que o estilo já é definido dentro do botão e está o onpress, está aí.
E que é a função. Então esse cara é assim, salvar e ver se mudou, está tudo ok ainda.
Botão is not defined, esquecemos de importar. Import.
Botão from, botão.
Vamos alisar. Está aí, funciona, né? Agora vamos botar os outros botões, botão, label.
Esse cara onpress, já estava ali de ver só copiar.
Está aí, deletes, faz outro botão, eu vou só copiar, tá bem?
Terceira página, né? Vou fazer isso aqui. Terceira.
Está aí, muito melhor. Temos nosso próprio componente chamado botão e vamos ver.
Eu vou ter o label errado. Segunda página, terceira página.
E agora vamos testar muito bem, segunda muito bem. Vamos mudar esse botão do segundo aí,
em vez de ser tutable, a gente faz o nosso próprio botão, label, voltar.
Você vê que a gente está fazendo o botão de voltar sempre a mesma coisa,
talvez você pode até fazer um componente chamado botão voltar para não ter que fazer sempre a mesma coisa.
Então vamos botar o onpress aqui e está aí, volta, está feito.
E isso tem que estar aqui.
Está. Primeira página, volta, segunda página. Oh, sempre esquecemos.
O que a gente tem que fazer? Isso, importar o botão aqui.
Import, botão, vamos, botão.
Segunda, está aí, o botão volta, está definido.
Então a gente fez o nosso próprio botão, componente, botão, que já tem os estilos aqui dentro desse cara.
A gente não tem que definir estilo para cada visão ou cena que a gente tem.
Já é tudo definido dentro do próprio componente e a gente pode re-usar, usar novamente.
Vamos até remover esses estilos aqui que não precisa mais.
O botão já está definido no componente de botão.
A gente faz todos esses caras aqui e a gente pega as propriedades do props e injeta assim.
E também o label.
Mostra qualquer coisa que é passada com a propriedade que se chama label.
E o navegador está funcionando.
Dá o navigate aqui que só puxa para o navegador, que é passado como props aqui que vem do index da render scene.
Vamos até remover e tirar esse cara daqui que faz o nosso próprio render scene,
fazer a nossa própria render scene, render scene.
Vamos fazer o nosso render scene para ficar...
E eu botar o argumento aqui.
E esse cara aqui, o switch vai dentro, vai ficar lá.
Tá bom?
Aqui é o render scene que eu defini.
Vamos ver se ainda está funcionando.
Tá aí.
Só para ficar mais organizado, eu tirei o render scene e pus aqui fora.
Tá bom?
E o navegador é sempre passado para os componentes aqui dentro da render scene.
E o que é a rota?
É o que você passa dentro do objeto.
E tem o ID que a gente passa aqui e também das primeiras páginas quando a gente quer voltar.
E...
É por isso...
Por isso...
É isso que eu queria fazer nesses vídeos sobre o navegador.
E agora a gente já sabe como empilhar a nova cena usando des props, navegador, push.
E como voltar para a cena anterior usando o pop.
Props, navegador, pop.
Tá bom?
Se você gostou do vídeo, por favor, deixe comentários, se tem sugestões, subscreva.
Cara, é muito gratinho. Muito obrigado.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: