React Native: Estilização básica

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.