Summary
Keywords
Full Transcript
Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Olá, Dev! Nessa aula do curso Base de React Native nós vamos finalizar a tela Home e deixá-la pronta de verdade. Até agora construímos boa parte da estrutura, mas ainda faltavam alguns detalhes importantes para que a tela ficasse igual ao protótipo. Vamos implementar juntos a mensagem de estado vazio, que aparece quando o usuário ainda não registrou nenhum humor, além de configurar todo o alinhamento e a estilização para garantir que a tela fique exatamente como planejado no design. Além disso, você vai aprender como criar a lógica que alterna entre diferentes footers, dependendo se o usuário já tem ou não um nome registrado. Isso significa que, quando o nome ainda não estiver definido, vamos exibir o input para cadastro. Já quando o nome estiver preenchido, o app vai mostrar uma nova versão do footer com um conjunto de estrelas, permitindo ao usuário registrar o humor do dia. Esse é um passo muito importante, porque conecta a lógica da aplicação com a experiência do usuário. Para completar, vamos explorar como utilizar ícones no React Native através do Expo Vector Icons, escolhendo o estilo ideal para representar as estrelas e deixando tudo bem próximo do protótipo. Também vamos configurar interações com clique, navegação para a tela de detalhe e até a passagem de parâmetros para identificar qual estrela foi selecionada. Ao final da aula, sua tela Home estará totalmente finalizada, funcional e pronta para levar o app a outro nível. Links mencionados no vídeo: 🗨️ Discord - https://discord.gg/ZC7JrPZn7P 🎬 CodarSe - https://codarse.com 🖥️ Protótipo no Figma: https://www.figma.com/community/file/1542265508040591315 📖 Repositório: https://github.com/lvsouza/youtube-react-native-humor-tracker/tree/ac85bfde5d4b4d4e917170cfc77882fb3f8f840b 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:30 | Avisos importantes 0:42 | Entendendo o protótipo 1:50 | Adicionando o empty container 5:50 | Alternando o Footer para o Footer com as estrelas para registrar o humor 7:38 | Como adicionar ícones no app 14:30 | Configurando a navegação para a tela de detalhes 15:25 | Finalização e agradecimentos CODARSE - Desenvolvimento geral do projeto #ReactNative #CursoReactNative #ReactNativeDoZero #CriarApp #DesenvolvimentoMobile #ReactNativeGratis #AppEmMinutos #JavaScript #ReactNativeTutorial #Expo #ProgramacaoMobile #ReactNativeBrasil #PrimeiroApp #MobileDeveloper #ReactNativeBeginner
