Design do App OneBitHealth – Aula 3 | Curso React Native (aprendiz)

Parte 1


Parte 2


Parte 3


Estilos

O style no React Native é um pouco diferente do que em um projeto web utilizando CSS ou no ReactJs.
No React Native os estilos são passados via JavaScript como objeto json, muito parecido com o CSS.

CSS

React Native

 

Começando nossa estilização

Em nosso App.js vamos adicionar style={styles.container} para estilizar a cor de fundo do nosso app e estruturar como os componentes devem ficar.

App.js

Veja, criamos uma const styles que recebe um objeto json com nosso estilo e para ser aplicada a view, basta chamar o container style={styles.container}, assim o componente <View> receberá o estilo que esta dentro de container.

Title

Agora vamos estilizar o Title. Precisamos criar um arquivo chamado style.js dentro da pasta Title

Agora no nosso index.js vamos importar o nosso arquivo de estilo e começar a criar os estilos:

Agora criarmos nosso estilo dentro do style.js.

No index.js vamos definir os nomes dos nossos estilos criados no style.js.

Com nosso estilo do nosso title implementado, vamos prosseguir.

 

Form

Agora vamos criar os estilos do nosso Form. Vamos criar o arquivo style.js dentro da pasta Form onde colocaremos o estilo do form.

No index.js vamos importar o nosso arquivo de estilo:

Vamos criar nosso estilo.

Agora no index.js vamos definir os nomes dos nossos estilos criados no style.js

 

ResultImc

Como anteriormente, crie o arquivo style.js dentro da pasta ResulImc

Importe o estilo dentro de index.js

Aqui no style.js, vamos estilizar o resultado do cálculo do IMC:

Nosso index.js do ResultImc ficará assim:

 

Pronto! Com nossos estilos criados e implementados temos nosso App com uma nova cara, agora estilizado e organizado, separando os estilos do arquivos principais.

Por boa prática use sempre os estilos separados e importados antes de definir o estilo nos seus components, pois assim ele será chamado somente após existir, além de receber uma sugestão de nomes (o VSCode irá sugerir quando for estilizar) uma vez que disponíveis no seu arquivo de estilos facilitando na hora do desenvolvimento.

5 1 vote
Article Rating
abril 27, 2021
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
Feito com s2 por OneBitCode
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: