Construindo a Interface por Partes
Objetivo: Aprender React Native montando uma Agenda de Contatos no Snack.
Tela do snack.expo.dev
Como abrir o Snack
1
Acesse:
snack.expo.dev
snack.expo.dev
2
Faça login com sua conta Google.
3
Avatar → My Snacks → + New Snack.
4
Apague o código inicial.
5
Cole o código da aula.
6
O preview aparece automaticamente.
7
Clique no botão azul Save.
Fundamentos de interface em React Native
Como o React Native constrói uma interface
Antes de escrever muitos comandos, o aluno precisa entender uma ideia central: a interface de um aplicativo é formada por componentes organizados dentro de outros componentes.
No React Native, a tela funciona como um conjunto de caixas agrupadas. Cada parte visual normalmente fica dentro de uma View. Essas caixas podem ficar uma dentro da outra, lado a lado ou empilhadas verticalmente. Programar interface é aprender a organizar essas caixas com clareza.
1. A ideia principal: caixas dentro de caixas
Como pensar a tela
Primeiro observe o aplicativo como blocos: fundo, cartão, título, área da foto, área dos dados e área dos botões.
Como o código representa isso
Cada bloco visual é montado com componentes. A View é o container principal para agrupar outros componentes.
viewTela
viewCartao
viewTitulo
viewCorpo
viewFoto
viewDados
viewBotoesOperacao
2. Componentes mais usados nesta aula
ViewÉ o principal container. Serve para organizar e agrupar outros componentes.
TextExibe textos na tela, como títulos, rótulos e informações.
TextInputCria campos para digitação de dados.
ImageMostra imagens dentro da interface.
TouchableOpacityRepresenta ações do aplicativo, quando usado em etapas futuras.
StyleSheetOrganiza a aparência visual: cores, tamanhos, margens, bordas e alinhamentos.
3. Estrutura e estilo trabalham juntos
Componentes
Dizem o que existe na tela: View, Text, TextInput, Image e outros elementos.
Estilos
Dizem como esses elementos aparecem: cor, tamanho, posição, espaçamento, borda e alinhamento.
Exemplo: uma View cria uma caixa. O style dessa View define se ela será grande, pequena, azul, arredondada, centralizada, em linha ou em coluna.
4. Como o código vira interface
1. Criar a estruturaMontamos os componentes na ordem correta.
2. Agrupar os blocosColocamos componentes dentro de Views para formar áreas visuais.
3. Aplicar estilosUsamos StyleSheet para definir aparência e organização.
4. Observar o resultadoO preview mostra como o código aparece na tela do aplicativo.
5. Ajustar aos poucosMelhoramos alinhamento, tamanho, espaçamento e hierarquia visual.
6. ConsolidarAo final, o aluno entende a tela como blocos organizados.
5. Onde o Snack Expo entra
O Snack Expo permite escrever, testar e visualizar o app React Native direto no navegador. O arquivo principal é o App.js.