Curso
React Native: Estilização básica
De nada adianta criarmos um aplicativo com funcionalidades muito úteis se não é claro para o usuário como utilizá-lo. Estilizar os componentes permite ao usuário ter uma melhor experiência para utilizar o seu aplicativo. Neste curso aprenderemos como estilizar um componente utilizando propriedades de estilo que podem ser usadas em textos, containers e imagens. Através dessas propriedades você vai conseguir, por exemplo, alterar a cor de fundo, definir borda e criar títulos.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
10 horas
Curso de React Native (10 aulas)
Aula 1 - Introdução
Muito se fala sobre a estilização de um aplicativo e nós já até conhecemos algumas propriedades de estilo para alterar a aparência dos nossos componentes (View, Image e Text), mas o que realmente significa estilizar e porque isso é feito é o que vamos aprender nesta aula.
Aula 2 - Relembrando como estilizar um componente
Você já sabe como utilizar o código StyleSheet para criar um estilo e usá-lo para estilizar o seu aplicativo. Nesta aula vamos revisar este conceito que é de extrema importância para aprender os diversos tipos de propriedades de estilo.
Aula 3 - Estilo inline
Além de importar e utilizar o código StyleSheet para criar o estilo do aplicativo, existe uma forma mais simples que podemos utilizar para estilizar um componente. Nesta aula vamos aprender a estilizar um componente inline.
Aula 4 - Padrão de cores
No React Native utilizamos cores para estilizar o fundo da tela ou então textos. Você já conhece o padrão nominal, ou seja, utilizar o nome da cor em inglês, nesta aula vamos conhecer os tipos RGB e Hexadecimal.
Aula 5 - Definindo o tamanho e a cor de fundo
Existem algumas formas de destacar uma parte da tela do aplicativo. Uma dessas formas é alterando a sua cor de fundo e definindo um tamanho fixo, assim conseguiremos por exemplo criar uma barra de título.
Aula 6 - Definindo a borda
Em alguns casos queremos destacar uma caixa de texto ou uma imagem, porém não queremos pintar o seu fundo. Uma alternativa para isso é definir uma borda para o componente. Veja nesta aula como isso é feito.
Aula 7 - Definindo espaço entre componentes
Para que os componentes não fiquem grudados, existem dois tipos de propriedades que afastam um componente do outro. Essas propriedades são margin e padding e aprenderemos elas e suas variações nesta aula.
Aula 8 - Estilizando textos
Um título, um subtítulo, uma palavra em destaque ou então uma citação são exemplos de textos. Esses textos são exibidos através do componente Text. Para diferenciá-los entre si utilizamos algumas propriedades que veremos nesta aula.
Aula 9 - Estilizando um aplicativo
Para colocar em prática os conceitos que vimos neste curso, vamos criar um aplicativo que exibe textos e uma imagem. Através desse aplicativo vamos aplicar as propriedades de estilo nos componentes View, Text e Image.
Aula 10 - Criando o código do zero
Nesta aula vamos explicar os passos dados para criar o aplicativo que vimos na aula anterior, para isso vamos utilizar um layout como base e através dele vamos ter uma base para inserir os componentes no código.
Veja outros cursos de React Native
React Native: Consumindo APIs
React Native: Consumindo APIs Públicas de Terceiros
React Native: Usando Array.map e Array.filter