Mapas e Rotas com React Native - #3 CSS

Nesse curso vamos implementar a nossa folha de estilo em cascata (CSS) dentro do nosso app com React Native.

CSS no React Native

Para iniciarmos o projeto, acessamos o terminal do nosso sistema operacional e digitamos os comandos:

cd c:/Project
expo start --android

assets/css/Css.js

Vamos criar o nosso arquivo externo css dentro da pasta assets/css:

import {StyleSheet} from "react-native";

const css = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        justifyContent: 'center',
    },
    map:{
        height: '60%'
    },
    search:{
        height: '40%'
    }
});
export {css};

App.js

No nosso entry point App.js vamos importar nosso componente css e remover a constante styles:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Text, View } from 'react-native';
import {css} from './assets/css/Css';

export default function App() {
  return (
    <View style={css.container}>
      <View style={css.map}>

      </View>

      <View style={css.search}>

      </View>
    </View>
  );
}

Por hoje é só turma. Sucesso nos códigos e na vida!

Precisando de assessoria? webdesignemfoco@gmail.com