StyleSheet

A estilização é importante para que o aplicativo tenha uma boa aparência e chame a atenção do usuário.

Folha de Estilos

Em outros momentos, vimos a estilização utilizando a tag 'style' que recebe um objeto similar a um 'css'. Continuaremos usando a tag, mas agora criaremos um objeto separado que contém os estilos e vamos passar esse objeto para a tag style.

Na criação do objeto, será dado um nome e criadas propriedades que terão a estilização desejada. Após isso, essa propriedade será usada na parte do código à qual é desejável aplicar tal estilização.

Criando a StyleSheet

Para praticar a criação e o uso do StyleSheet, acompanhe a aula e implemente o código abaixo:

import React from 'react';
import { SafeAreaView, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={[styles.red, styles.grande]}>Hello From React</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({

  container: {
    backgroundColor: '#0F0'
  },
  red: {
    color: '#F00'
  },
  grande: {
    fontSize: 30
  }

})

Inserindo estilo 'inline'

Como visto em outras aulas, há como inserir estilo 'inline'. Veja o exemplo abaixo:

<Text style={{ fontSize: 50 }}>Inline Style</Text>

Esse método é mais adequado para estilizações pontuais.

Note: É importante lembrar de fazer a importação do 'StyleSheet'.