Parte 1
Parte 2
Parte 3
Estilos
CSS
|
1 2 3 |
.text { font-size: 14px; } |
React Native
|
1 2 3 4 |
const styles = StyleSheet.create({ container: { fontSize:10 } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<View style={styles.container}> <Title /> <Form /> </View> const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#e0e5e5", paddingTop: 80, }, }); |
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
|
1 2 3 |
...Title index.js styles.js |
Agora no nosso index.js vamos importar o nosso arquivo de estilo e começar a criar os estilos:
|
1 |
import styles from './style.js'; |
Agora criarmos nosso estilo dentro do style.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const styles = StyleSheet.create({ boxTitle: { alignItems: "center", justifyContent: "center", padding: 10, }, textTitle: { color: "#FF0043", fontSize: 24, fontWeight: "bold", }, }); export default styles |
No index.js vamos definir os nomes dos nossos estilos criados no style.js.
|
1 2 3 |
<View style={styles.boxTitle}> <Text style={styles.textTitle}></Text> </View> |
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.
|
1 2 3 |
...Form index.js styles.js |
No index.js vamos importar o nosso arquivo de estilo:
|
1 |
import styles from './style.js'; |
Vamos criar nosso estilo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
const styles = StyleSheet.create({ //formContext é a area que ficara em torno do nosso form formContext: { width: "100%", height: "100%", bottom: 0, backgroundColor: "#ffffff", borderTopLeftRadius: 30, borderTopRightRadius: 30, alignItems: "center", marginTop: 30, }, //form é um componente filho de formContext e nele ficara nossos inputs e etc.. form: { width: "100%", height: "auto", marginTop: 30, padding: 10, }, //formLabel é o nome dos nossos inputs que ficara acima deles formLabel: { color: "#000000", fontSize: 18, paddingLeft: 20, }, //aqui o estilos dos nosso inputs, personalizados com bordas arredondadas input: { width: "90%", borderRadius: 50, borderColor: "#ffffff", backgroundColor: "#f6f6f6", height: 40, margin: 12, borderWidth: 1, paddingLeft: 10, }, //buttonCalculator e o botao que irá chamar a função do calculo de imc buttonCalculator: { borderRadius: 50, alignItems: "center", justifyContent: "center", width: "90%", backgroundColor: "#FF0043", paddingTop: 14, paddingBottom: 14, marginLeft: 12, marginTop: 30, }, //textButtonCalculator é responsáve por por estilizar o texto dentro dentro do button textButtonCalculator: { fontSize: 20, color: "#ffffff", }, }); //Lembre-se sempre do export default. //sem ele o seu estilo nao será exibino no seu componente. export default styles |
Agora no index.js vamos definir os nomes dos nossos estilos criados no style.js
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<View style={styles.formContext}> <View style={styles.form}> <Text style={styles.formLabel}>Altura</Text> <TextInput style={styles.input}/> <Text style={styles.formLabel}>Peso</Text> <TextInput style={styles.input}/> <TouchableOpacity style={styles.buttonCalculator}> <Text style={styles.textButtonCalculator}></Text> </TouchableOpacity> </View> <ResultImc /> </View> |
ResultImc
Como anteriormente, crie o arquivo style.js dentro da pasta ResulImc
|
1 2 3 4 |
... ...ResultImc index.js styles.js |
Importe o estilo dentro de index.js
|
1 |
import styles from './style.js'; |
Aqui no style.js, vamos estilizar o resultado do cálculo do IMC:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
const styles = StyleSheet.create({ //contextImc será nosso componente pai contextImc: { flex:1, marginTop:40, paddingTop:15, alignItems:"center", width:"100%", }, //No resultado do caclulo do imc colocaremos esse estilo resultImc:{ fontSize:48, color:"#ff0043", fontWeight:"bold", }, //esse sera a frase que exibiremos abaixo do resultado titleResultImc:{ fontSize:18, color:"#ff0043", fontWeight:"bold", } }); export default styles |
Nosso index.js do ResultImc ficará assim:
|
1 2 3 4 5 6 7 8 |
<View style={styles.contextImc}> <Text style={styles.titleResultImc}> {props.messageResultIMc} </Text> <Text style={styles.resultImc}> {props.resultImc} </Text> </View> |
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.
