Melhorando a navegação do seu app com Stack, Tab e Drawer Navigator
Вставка
- Опубліковано 16 лис 2024
- [GRATUITO] TESTE SEUS CONHECIMENTOS EM REACT rseat.in/9WfBn...
Faça parte da maior comunidade dev da América Latina no DISCORD: / discord
A navegação é uma das partes mais importantes da experiência do usuário dentro do seu app. Além de ser intuitiva e sem etapas desnecessárias, ela também pode ser estilosa e prática.
Hoje já existem diversas ferramentas e muitos estilos de navegação disponíveis por ai. O segredo é saber como implementar todas elas juntas sem exagerar (claro) e sem complicar a usabilidade do seu app.
No vídeo de hoje, você vai ver como aplicar stack, bottom tab e drawer navigator dentro da sua aplicação móvel com React Native. E o melhor: totalmente na prática.
E aí, bora codar?
-----
Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com...
Cadastre-se na nossa plataforma: app.rocketseat...
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat
Tentei uns 15 videos pra fazer esse bendito Drawer mode e somente o SEU deu certo, tirou onda, me salvou mto
Nem ferrando, eu tava vendo um video agr de vcs de 8 meses atras sobre expo router pra implementar no meu app, e acabou de chega a notificação desse video kkkkkkkkkkkkkk
Famoso analyses
Séria interessante um vídeo sobre estrategias de monetização. Tenho muitas dúvidas de como coloca anuncio em um aplicativo, sobre como liberar determinada funcionalidade somente para quem tem a assinatura. Entre outras estrategias.
Tbm acho que seria uma boa ideia tbm estou precisando
@@lucasemanuel5391 E eu para fazer autenticação com o Google kkkkkk E vou precisar disso que mencionei no primeiro comentário tbm, já imagino o sofrimento, mas é um desafio né, assim evoluímos.
Eu fiz algo do gênero com um state em context (ex, premium)quando a pessoa compra mudei o state para true e esse state controla os acessos. Depois é guardado no dispositivo com secure store da expo
@@marked75 Entendi, obrigado pela sugestão.
up
Caraca esse "pulo do gato" foi top d+! Obrigado pela aula
Cara monstro, parece tão fácil.
Rodrigo....Show de bola...Estou começando a entrar na programação do react-native...Parabéns pelo conteudo.
Pohhh!
Video excelente, pois uma vez tentei fazer isso e apanhei bastante.
Inclusive sou aluno do Ignite e fiz esta pergunta também lá.
Parabéns mais uma vez Rodrigo!!!
Muito Obrigado
se pudesse fazer +1 video explicando as MVC no react-native-js eu seria mais grato ainda
Cara, muito obrigado! Seu vídeo me ajudou muito, estou começando aprendendo do zero. Poderia criar um curso na Udemy fazendo alguns projetos completos com o Expo, os que tem lá são muito rasos.
qnd eu comecei a usar o react native o nested navigator com stack e bottom tabs era mo bugadao kk hj em dia ta td rodando mo liso
Rodrigo! Parece que tu leu minha mente kkkkkkk monstro demais
ola, tem como usar o stack fora do drawer ?
tipo tenho um TouchableOpacity e quando clicar nele quero ir para outra pagina
Rodrigão é um mostrooo, valeu de mais!!
que coincidência tava com esse problema esta semana,mais video que sera salvo na minha lista
Rodrigão, poderia fazer uma segunda parte do vídeo com tamagui, fazendo as configurações web com o webpack e rodando em ambas as plataformas. Seria bacana para todos que pensam utilizar o tamagui na proposta de web + mobile.
Quer dizer que para cada item do meu, se eu quiser que tenha icone, vou precisar todo o stack route do pra implementar uma rota ?? é isso ?
Gostei muito do vídeo. Como faço para sempre manter o TabNavigator aparecendo utilizando varias telas no Stack? Ex. 5 telas no stack e 2 apenas no tab.
tenho a mesma dúvida
estou com essa duvida também, quero manter a tab fixa em baixo mesmo navegando dentro das stacks do drawer
Mesmo problema... Alguém conseguiu resolver?
Também tô tentando fazer isso, mas não consegui
@GuilhermeBuchman, conseguiu resolver?
Muito obg pelas informações irmão 👌🙌🙏
Baita aula, aprendi demais!
Muito obrigado pelo vídeo mano, bem explicado passo a passo
Deus te abençoe!!
Fala mais um pouco sobre a biblioteca routes para navegação!!
Obrigado pela aula. Muito top!
Olá,Rodrigo pode criar colocar components dentro do drawer? Obrigado!!!
Recentemente desenvolvi um app e tive problemas ao usar modal com o tab navigation, então pra adiantar o processo eu tive que simular uma tab mas no stack navigation.
Rodrigo quando colocar o drawer e o fundo escuro fica branco e nao estou conseguindo colocar a mesma cor do fundo, como resolver?
To aprendendo a usar o native e meu deus, ta sendo um inferno para implementar os componentes mais básicos. Queria por um bottomNavigationView igual do java mesmo, so que ta osso. Cada vez que pesquiso aparece trocentos comandos diferenres
Opamuito bom conteudo. Podemos ter esse metodo aplicado com Expo router?
Qual o tema que você está usando no vscode? Alguém sabe dizer?🥺
faz o mesmo usando o expo router
Muchas gracias por el video. Excelente explicación ¡¡¡ Saludos.-
Excelente, vou usar.
Eu nunca acerto os ícones, posso fazer a instalação que for... Como faço pra colocar itens sem ter dor de cabeça?
Tenho uma dúvida: se a navegação do meu App for toda pelo tab e uso para outras telas o Stack é possível deixar o tab sobreposto ao Stack?
Muito interessante! Mas no caso eu gostaria de renderizar meu tabBar quando navego para dentro das stacks também, basicamente deixando ela "fixa" nas telas, como poderia fazer? Vi que essa era a duvida de mais um possoal ali em baixo.
Conseguiu?
conseguiu?
show, meu happy hour de hoje a noite
ela funciona para a CLI?
Gente, alguém me ajuda por favor?
Estou tentando rodar qualquer projeto de react native pelas minhas IDEs mas elas não reconhecem nenhum android instalad, mesmo tendo lá inserido. Já removi o Android Studio do meu mac 2x e reconfigurei mas o problema segue o mesmo. Tá complicado demais!!!
oi, estou fazendo meu tcc e estava fazendo o menu a partir deste video, porém começou a dar um erro que não consegui achar uma soluçao
ERROS:
Error: [Reanimated] `valueUnpacker` is not a worklet, js engine: hermes
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes
basicamente, tenho a tela de Login que ao clicar em um botão dentro desta tela, na teoria, ela abriria a tela de menu que teria o drawer e o tab e a partir disso ela abriria todas as outras telas
Mas este erro está me impossibilitando de continuar, alguém pode me ajudar?
Como faz pra não aparecer na tela de cadastro e login tô quebrando a cabeça com isso
alguém me diz por favor como eu crio um projeto expo com a pasta android já inclusa assim como tinha essa opção ao criar antes.
não estou conseguindo
Excelente conteúdo
Pq não utilizou o expo-router?
Como está a maturidade do expo-router em relação ao React Navigation?
Estou decidindo que biblioteca de navegação utilizar em um projeto novo.
React Navigation ainda é mais robusto e seguro em relação à bugs.
Até aonde me lembro, a ultima vez que ele comentou sobre, disse mais ou menos assim: "Use expo Router para projetos pessoais, e não algo que vai para produção ainda"
Espero ter ajudado!
achei super interessante, mas não entendi como fazer as outras rotas serem navegadas pela drawer, pois só está chamando a início, e quando renderiza as outras, só manda pra home. Teria que criar componentes separados da tab routes?
Estou com o mesmo problema... Conseguiu resolver?
conseguiu resolver? queria saber como corrigir isso também
Essas legendas na tela me atrapalham muito, uma sugestão é usar essas techs para gerar legentas em um arquivo de texto e subir junto do video no youtube pra usar as CCs do proprio yt onde o usuário pode escolher posicionamento cores e tudo mais para a legenda.
Como faz teste de tela navigation ?
esse emulador é o android studio, ou tem outro?
vlw Rodrigão!
Se utilizar os três tipos de rotas na mesma aplicação afeta o desempenho?
não atrapalha o desempenho do app, porém não é uma boa experiencia para o usuário, é mais facil padronizar um só, porém se precisar outro por ter mt informação na tela, é tranquilo
@@oguiduart_ muito obrigado mesmo! dúvida sanada 👍🏻
Estou criando um App que tem uma tela stack navigation para fazer de login e quero quando fizer login entrar dentro do tab navigation. Só que tenho que passar variáveis como por exemplo o email do utilizador para dentro do tab. Como posso fazer?
Basta usar context, pesquise contexto em react native!
@@EnzoCriniti obrigado
Muito top
Eu queria ver o Rodrigão criando um projeto com angular. E asdcionando o Capacitor para criar um App.
Pra começar..
npm init @angular
E quando for adscionar o capacitor..
npx -p @angular/cli ng add @capacitor/angular
Rodrigo como faço pra conseguir programar pra native no wsl?