React Native Series: Estilizando o App com CSS

Compartilhe

Compartilhar no facebook
Compartilhar no google
Compartilhar no twitter
Compartilhar no linkedin

Espera, o que é isso 🤔?

Eu, Samuel Matias, dei início a uma Série que chamo de React Native Series, onde ensino o que seria o “danado” do React Native, como instalar e fazer um app simples. Caso tenha alguma dúvida sobre como isso tudo começou, Acessa esse link 👉🏾 https://movile.blog/author/samuel-matias/  que vai ter tudo nele referente à  série.

Agora, vamos continuar com nosso “appzinho” 😬? 

Samuca, o que seria Estilização 🤔?

Seria nada mais, nada menos que você estilizar (que em termos tecnológicos, seria você deixar bonitinho – na maioria das vezes) o que você está colocando para ser visualizado, no nosso caso, seria deixar visualmente atrativo o que será mostrado no nosso App. Agora, vamos estilizar?

Começando a Estilizar.

Antes de tudo, é bem legal se você já tiver uma noção do que seja CSS, pois ele seria a base da Estilização. Tem esse artigo bem legal que você pode dar uma olhada para te ajudar 👉🏾 https://www.w3schools.com/whatis/whatis_css.asp, caso ainda tenha dúvidas, recomendo procurar mais sobre o que seria CSS, que a partir daqui isso vai ser bem necessário.

Com o CSS 💅🏾 a gente deixa as coisas “bonitinhas” 🙂.

Depois de você ter entendido o básico do que seria o CSS, agora sim podemos ir para ele aplicado no React Native, de forma geral, ele seria um pouco diferente do CSS comum, na forma de declarar, forma essa que seria a do JSX (sobre JSX 👉🏾 https://www.reactenlightenment.com/react-jsx/5.1.html)

Para mais informações e também, para você entender melhor como iremos usar o CSS aqui, recomendo a leitura do conteúdo desses 2 links 👉🏾 https://facebook.github.io/react-native/docs/style / https://www.w3schools.com/react/react_css.asp .

Vamos meter a mão na massa?

  1. Abrindo o App

Usando o último código que criamos, vamos executar ele no Simulador/Device: 

Para iOS: react-native run-ios

Para Android: react-native run-android

Depois de executado esse comando, deverá aparecer algo do tipo pra você: 

001

  1. Estilizando o texto “Olá Mundo”

Que tal centralizarmos ele? Darmos uma cor a ele? Sim, vamos fazer isso tudo 🤗!

Para conseguirmos utilizar o CSS no React Native, é necessário que a gente chame uma nova propriedade, que seria o StyleSheet.

No código, onde fica os imports, adicione o StyleSheet aos imports do React Native, de forma que fique assim:

002

Agora com ele importado, podemos fazer uso dele 😄.

2.1. Criando o constante “styles”

Para que seja possível estilizar, é necessário que seja criado uma constante que irá receber as estilizações, iremos dar o nome de styles para essa constante.

Logo abaixo dos imports do React Native, pule uma linha e crie a constante styles:

003

Depois de criada, iremos fazer com que ela receba o StyleSheet.create({}) , para que seja possível criar nossos css/estilizações dentro dele:

004

2.2. CSS e o FlexBox

Iremos utilizar várias coisas do CSS, mais vamos utilizar bastante do conceito de FlexBox, conceito esse bem importante para trabalhar com CSS, recomendo que antes de avançar, leia esse artigo referente ao FlexBox Geral 👉🏾 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ e esse aqui de FlexBox para React Native 👉🏾 https://micropyramid.com/blog/using-flexbox-with-react-native/, leia quantas vezes achar necessário, pois vamos usar ele bastante não só aqui, mais sempre que for necessário construir uma interface Mobile com React Native e até mesmo Web, então foca em entender o FlexBox, aí você continua, ok 😉?

2.2. Centralizando o texto

Como você já deve ter percebido, o texto está muito mal alinhado, principalmente no iOS, vamos fazer com que ele fique no meio/centralizado.

No const styles, dentro da “chaves”, pule uma linha e crie um objeto de nome container:

005

Agora, no código <View>, depois do nome View de um espaço e adicione a prop styles={} e dentro da “chaves” adicione styles.container. Adicionando esse código, estamos referenciando o style container que criamos dentro da const styles, então tudo o que fizemos de styles dentro da “chaves” do container dentro da const styles será refletido nessa <View> que está recebendo o styles.container por parâmetro:

006

Depois de feito isso, atualize seu app no Simulador executando o comando: 

iOS:

Vá no seu simulador, clique nele, e aperte esse comando de teclas:

COMMAND + R

Android

Vá no seu emulador, clique nele e aperte esse comando de teclas:

COMMAND + M

Em seguida, no menu que abriu, clique na opção RELOAD.

Ok Samuca, atualizei o Simulador/Emulador, mas não mudou N A D A 😰.

 Tudo bem é normal, afinal não colocamos nada no style do container, então não tem o que mudar visualmente, mas vamos tratar de fazer essa mudança visual agora viu?

Dentro das “chaves” do Objeto container que criamos dentro da const styles, coloque a seguinte linha flex: 1, e abaixo dele coloque backgroundColor: red :

007

 Depois disso, atualize seu Simulador/Emulador e veja o que vai ocorrer 😱: 

008

Sim, colocamos um fundo VERMELHO com CSS na nossa <View>, agora certo, o que o código que adicionamos faz? O flex: 1 indica que queremos que a <View> ocupe todo espaço que ela conseguir/puder, no caso aqui, ela consegue/pode ocupar TODA A TELA. Então ela irá ocupar a tela toda nesse caso sem problema algum, e o backgroundColor: red seria a forma que indicamos a cor de fundo que  queremos que nossa <View> tenha, nesse caso, foi o VERMELHO(red), mas poderia ser o AZUL(blue), VERDE(green), etc…

Beleza Samuca, muito massa 😄! Mas cadê o texto centralizado 🌝 ?

Sim, sem mais delongas, vamos colocar esse texto centralizado!

No style container, adicione justifyContent: center’,  e alignItems: center.

009

Depois disso, atualize seu Simulador/Emulador e veja a diferença 👀:

0091

Não é que centralizou o texto mesmo 😱 👏🏾!

O justifyContent: center seria para alinhar ao centro TUDO que está dentro da <View> na VERTICAL, já o  alignItems: center  seria  para alinhar ao centro TUDO que está dentro da <View> na HORIZONTAL.

Faça uns testes, tire um deles do CSS e deixe apenas o outro e vice-versa e perceba o que acontece, enfim brinque com o CSS 😄! Explore ele bastante, pois você vai curtir muito o Css.

Você consegue fazer coisas muito legais com CSS tanto no React Native como na Web.

2.3. Estilizando o Texto:

Agora que a gente já sabe um pouco como aplicar o CSS em uma <View> que tal aprender também como aplicar em um texto 🤩?

Simbora que vou ensinar a vocês!

Antes de começar, mude a cor de fundo da <View> para BRANCO, ok? Vamos ver se você aprendeu como faz 😄, caso não só voltar um pouquinho que eu ensino como faz.

Não se preocupe se você não conseguiu fazer sem revisar, cada um tem seu tempo, então pode relaxar, tá bem 🙂? 

Voltando para CSS do Texto, dentro do const styles, abaixo do objeto container, crie outro objeto de nome text:

0092

Procure pela tag <Text> e nela, adicione o style={} e dentro das “chaves”, adicione styles.text:

0093

No objeto css text, adicione fontSize: 20, e depois color: orange:

0094

Depois disso, atualize seu Simulador/Emulador e veja a diferença 👀:

0095

Agora ficou bonitinho 😍!

O fontSize: 20, , seria para definir o tamanho que você quer do seu texto e o color: orange , seria para definir a cor do seu texto.

Um ponto interessante dos CSS que usam cores no React Native, eles não só aceitam os Nomes das Cores mas também aceitam HEX(Ex: color: #fffff), RGBA(Ex: color: ‘rgba(0, 0, 0, .24)’), então na hora de usar cores, use do modo que achar melhor 😃!

Aprendemos um bocado hoje sobre CSS né? Espero que tenham gostado e entendido, releiam quantas vezes for necessário para entender, tanto esse artigo como os demais links de artigos que coloquei como apoio, lembrem-se que cada um teu seu tempo de aprendizado, então relaxem e aproveitem o conhecimento 😄.

Brinquem bastante com o CSS no React native, façam coisas novas, além desse artigo e tudo mais, pois no próximo artigo dessa série vamos usar ele bastante e inclusive muitos outros conceitos de CSS.

Vamos tentar fazer algo parecido com isso:

0096

Se já quiser ir tentando fazer algo utilizando o que você aprendeu aqui e o que você estudou por fora, fique complementarmente à vontade 😄.

Para ter um bom entendimento do que passo nesses artigos e do que vocês estudam na internet, é de suma importância que vocês pratiquem esses conceitos aprendidos. 

Com o tempo, vocês vão ver a diferença que a prática faz 😉.

Quer aprender como vou fazer esse card ai que mostrei 👆🏾 e muito mais sobre React Native? Então, não deixe de acompanhar essa série de artigos!

O Código que fizemos nessa aula, se encontra em meu GitHub:

https://github.com/samuelmataraso/AlbumBook/tree/article/class_2

Valeu! Até mais o/

 

Deixe um comentário

%d blogueiros gostam disto: