Summary
Keywords
Full Transcript
Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Nessa aula do curso Base de React Native vamos trabalhar na configuração das cores de background do nosso aplicativo, aproximando ainda mais o visual do que foi planejado no protótipo. Até agora o app está funcional, mas ainda não tem a identidade que queremos. Então, nesta etapa, vamos ajustar o tema para que a interface fique sempre no modo escuro, garantindo consistência e um design mais agradável já desde o início da navegação. Esse é um ponto essencial para que o app tenha a aparência correta e não fique com telas despadronizadas. Durante a aula você vai aprender como aplicar cores de background em diferentes partes do app, desde a navegação em stack até a navegação em tabs. Vamos entender como configurar o contentStyle, headerStyle, headerTitle e até mesmo os botões de navegação para que fiquem com as cores certas e combinem com o restante da interface. Além disso, vamos utilizar os tokens de cores criados anteriormente para centralizar todas as definições, garantindo que qualquer mudança futura seja simples e rápida de aplicar. Ao final da aula, o seu aplicativo já estará com o tema escuro configurado e aplicado em todas as telas principais, incluindo a home, detalhes e about. Essa base deixa o projeto muito mais próximo do protótipo original e abre espaço para que, nas próximas aulas, possamos refinar ainda mais o layout e adicionar novos elementos visuais. Se você quer deixar seu app com uma cara profissional e bem estruturada desde já, essa é uma aula que você não pode perder. 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/a4c5182f426febdae114fa102801fa5050ee98ae 🎮 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:17 | Avisos importantes 0:37 | Ajustando o tema do app 2:40 | Configurando o estilo geral da aplicação 7:00 | Aplicando a estilização nas tabs 10:00 | 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
