React Native: Estilizando componentes

Muito se fala sobre a estilização de um aplicativo, mas o que realmente significa estilizar e porque isso é feito é o que vamos aprender nesta aula.

Para aprender a estilizar componentes, vamos criar o aplicativo que será visto nesta aula. Através dele vamos aprender a estilizar textos, imagens e definir os espaços entre cada um desses componentes.

No React Native existem duas formas de estilizar um componente: através do objeto StyleSheet ou inline. Nesta aula vamos relembrar esses conceitos.

Existem algumas formas de destacar um componente e uma delas é alterando a sua cor de fundo. Outra alteração que podemos fazer é definir um tamanho fixo para o componente.

Em alguns casos queremos destacar uma caixa de texto, porém não queremos pintar o seu fundo. Uma alternativa para isso é definir uma borda para o componente.

Quando utilizamos componentes filhos para criar o componente pai notamos que eles ficam todos grudados uns nos outros. Para separá-los utilizamos as propriedades margin e padding que veremos nesta aula.

Um título, um subtítulo, uma palavra em destaque ou então uma citação são textos. Para diferenciá-los entre si utilizamos algumas propriedades que veremos nesta aula.

Posicionar componentes ao centro da tela verticalmente e horizontalmente, crescer o tamanho de um componente para preencher todo espaço da tela são algumas das propriedades flexbox que veremos nesta aula.

Conhecer a estrutura do nosso projeto bem como a divisão de arquivos e pastas e a forma como os componentes serão divididos é o assunto desta aula.

Está quase na hora de começar a aplicar na prática os conceitos de estilização, mas antes vamos baixar e conhecer o projeto base que será usado neste curso.