Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Curso base de React Native 2025: #50 - Configurando o header do stack navigation
Play lesson

📱Curso base de React Native - React Native Completo: +78 Aulas do Zero à DOIS apps prontos - Curso base de React Native 2025: #50 - Configurando o header do stack navigation

4.0 (1)
23 learners

What you'll learn

This course includes

  • 25.5 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Nessa aula do nosso curso Base de Reactive, vamos mergulhar fundo na construção do header da tela de detalhe do nosso app. Vou te mostrar passo a passo como ajustar o header para que ele fique exatamente como o protótipo, lidando com elementos como navegação entre tabs e steps, e garantindo que todos os detalhes visuais estejam corretos. Vamos explorar como trabalhar com o Expo Router e o React Navigation, entendendo a importância de propriedades como back e options para criar um header dinâmico e funcional em qualquer tela do nosso aplicativo. Além disso, vamos aprender a criar um componente de header totalmente customizado, utilizando React Native, Native Wind e os ícones do Expo Vector Icons. Vou te guiar desde a criação do componente até os ajustes finais de estilo, como padding, altura, cores e alinhamento, para que o resultado fique fiel ao protótipo. Essa aula é essencial para quem quer entender a construção de interfaces complexas e dinâmicas em React Native, aprendendo a combinar funcionalidades de navegação com estilos precisos de design. No final da aula, você terá um header funcional e estilizado, com botão de voltar, título dinâmico e aparência idêntica ao protótipo. Além disso, vou te mostrar como solucionar problemas comuns de layout e atualização no app, garantindo que você tenha controle total sobre cada detalhe visual. Essa é uma oportunidade para deixar seu app mais profissional e coerente, e, claro, melhorar suas habilidades em React Native e desenvolvimento de interfaces móveis. Links mencionados no vídeo: 🗨️ Discord - https://discord.gg/ZC7JrPZn7P 🎬 CodarSe - https://codarse.com 🖥️ Protótipo no Figma: https://www.figma.com/community/file/1543675168225105299 📖 Repositório: https://github.com/lvsouza/youtube-react-native-forca-play/tree/b14887a36f17c5e4f2413634c527a306a51b01be 🎮 App na Google Play: https://play.google.com/store/apps/details?id=com.lvsouzadev.forcaplay Outros cursos no canal: 🎩 Figma para DEVs - https://youtu.be/4rSPV1NbM10 ☪️ Curso de estilização no React - https://youtu.be/oUbPkR799fc 💎 Curso base de React - https://youtu.be/ggtWTKbhN_U 👑 React, Material UI 5 e Typescript - https://youtu.be/wLH1Vv86I44 🏆 Curso de API Rest, Node e Typescript - https://youtu.be/SVepTuBK4V0 Livros recomendados: 📘 Código limpo - https://amzn.to/43Xiick 📘 Arquitetura limpa - https://amzn.to/3ZMCStr 📘 Migrando sistemas monolíticos - https://amzn.to/45ByPDZ 📘 The Micro SaaS Handbook - https://amzn.to/4jCan93 Meu setup: 📺 Monitor 24: https://amzn.to/4msD7TY 🤖 Processador: https://amzn.to/4oJLZpN 🎧 Fone bluetooth: https://amzn.to/4lESd7r ⌨️ Teclado e mouse: https://amzn.to/4oPdgHu 💪 Suporte articulado: https://amzn.to/41hIrRE Conteúdo: 0:00 | Introdução da aula 0:35 | Avisos importantes 1:02 | Configurando o header persoonalizado 3:00 | Criando componente de Header personalizado 14:47 | Finalização e agradecimentos CODARSE - Estilização e tema com NativeWind #ReactNative #CursoReactNative #ReactNativeDoZero #CriarApp #DesenvolvimentoMobile #ReactNativeGratis #AppEmMinutos #JavaScript #ReactNativeTutorial #Expo #ProgramacaoMobile #ReactNativeBrasil #PrimeiroApp #MobileDeveloper #ReactNativeBeginner

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere