Programação Mobile Coding
Prof. Victor Sotero
Aula 03 – Componentes básicos do React Native
Grupo de Estilos
• Até o momento estudamos os estilos aplicados diretamente
em linha (text): mudamos as cores, tamanho de fonte, etc;
• A partir de agora iremos utilizar o componente StyleSheet;
• Precisamos adicionar ele no import;
• Após isso devemos criar uma constante onde a mesma irá
receber o StyleSheet com a função create();
• Dentro da função vamos adicionar nossos grupos de estilos;
Prof. Victor Sotero
Criando Grupos de Estilos
Prof. Victor Sotero
Utilizando os Grupos de Estilos
Prof. Victor Sotero
Grupo de Estilos
• Clique aqui para acessar o arquivo completo.
Prof. Victor Sotero
Múltiplos Grupos de Estilos
• Se você quiser agrupar mais de um estilo na mesma tag você
deve utilizar os colchetes[];
• Veja como fica logo abaixo:
Prof. Victor Sotero
Utilizando Tamanhos Dinâmicos e Fixos
Prof. Victor Sotero
Criando uma Formato de tela do App
Acesse o arquivo aqui
Prof. Victor Sotero
Flexbox e Alinhamentos
• O flexDirection vai fazer com que as colunas fiquem na
horizontal;
• O justifyContent serve para justificar a View;
• Dica: você pode substituir o center por outras opções. Ctrcl + D;
• O alignItems serve para alinhar o item na tela.
Prof. Victor Sotero
Flexbox e Alinhamentos
Acesse o arquivo aqui
Prof. Victor Sotero
Outro exemplo
Inserindo espaço entre as views. Você também
Pode utilizar o space-around
Prof. Victor Sotero
Outro exemplo
• Vamos agora criar três fileiras com as views. Para isso
precisamos alinhar o item (alignItems:’stretch’).
Prof. Victor Sotero
Recebendo dados
• Vamos precisar de:
• StyleSheet – novo tipo de styles
• TextInput - para criar a caixinha de texto onde será digitado
algo
• States (qualquer dúvida consultar a aula 02);
Prof. Victor Sotero
Recebendo Dados – Criando grupo de estilos
Prof. Victor Sotero
Recebendo dados – criando estados (states)
Prof. Victor Sotero
Recebendo dados – criando estados (states)
Prof. Victor Sotero
• Acesse o arquivo completo aqui.
Prof. Victor Sotero