CSS – React Native

Fazer o import componente StyleSheet do React Native antes de começar a formatar os estilos.

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

Depois da importação criar uma constante chamada estilos que irá receber todo o conteúdo de CSS.

Usando StyleSheet.create nós criamos uma folha de estilo conectada a constante estilos conforme código abaixo;

const estilos = StyleSheet.create ({
  
});

Agora devemos criar classes para formatar os diversos componentes do app.

const estilos = StyleSheet.create ({
  texto1:{
      color:'#f00',
      fontSize:20,
  }
})

No exemplo a classe texto1 tem a cor da fonte vermelha e o tamanho da fonte igual a 20;

Para aplicar essa classe ao nome da escola, devemos dentro da tag Text adicionar como atributo o estilo

<Text style={estilos.texto1}> Senai Suzano - Cursos</Text>;

Observe que todos os componentes agora tem a mesma formatação.

Essa formatação só atinge o componente onde ela foi criada.

Agora vamos criar a formatação do arquivo principal app.js, para isso devemos importar o StyleSheet e criar uma constante para armazenar as classes do css.

export default function App1 () {
  return (
    <View style={estilos.container}>
    <NomeEscola />
    <NomeEscola />
    <NomeEscola />
    <NomeEscola />
    <NomeEscola />
    <Text style={estilos.texto3}> suzano.sp.senai.br</Text>
    </View>
  );
};

const estilos=StyleSheet.create({
  texto3: {
       color:'#ddd',
      fontSize:20,
  },

  container: {
  flex:1,
  alignItems: 'center',
  justifyContent:'center',
  }
})

Foi criada uma constante também chamada estilos e foi criado duas classes, uma chamada texto3 para formatar o site da escola e outro chamado container para a View (Div) do app ficar centralizada na tela.

Também é possível fazer a formatação in-line de uma tag, para isso utilizamos style e abrimos duas chaves e digitamos o css )

<Text style={{color:'#fff', fontSize:25}}> 11 - 4743-3513</Text>