React Native: Utilizando styled-components

React Native: Utilizando styled-components | Alura Cursos Online

import { StyleSheet } from 'react-native'; 
export default StyleSheet.create({ 
boca: { 
     width: 85, 
     height: 60, 
     marginTop: -30, 
     backgroundColor: "#F18061", 
     borderWidth: 3, 
     borderColor: "#7B2B09", 
     borderTopStartRadius: 40, 
     borderTopEndRadius: 25, 
     borderBottomEndRadius: 30, 
     borderBottomStartRadius: 60, 
} 
});

import styled from 'styled-components'; 
const Boca = styled.View` 
width: 85px; 
height: 60px; 
margin-top: -30px; 
background-color: #F18061; 
border: 3px solid #7B2B09; 
border-top-start-radius: 40px; 
border-top-end-radius: 25px; 
border-bottom-end-radius: 30px; 
border-bottom-start-radius: 60px; 
`; 
export default Boca;

import { StyleSheet } from 'react-native'; 
export default StyleSheet.create({ 
nariz: { 
     width: 25, 
     height: 20, 
     backgroundColor: "#000200", 
     borderTopStartRadius: 10, 
     borderTopEndRadius: 10, 
     borderBottomStartRadius: 30, 
     borderBottomEndRadius: 30, 
} 
});

import styled from 'styled-components'; 
const Nariz = styled.View` 
width: 25px; 
height: 20px; 
backgroundColor: #000200; 
border-top-start-radius: 10px; 
border-top-end-radius: 10px; 
border-bottom-start-radius: 30px; 
border-bottom-end-radius: 30px; 
`; 
export default Nariz;

import { StyleSheet } from 'react-native'; 
export default StyleSheet.create({ 
bochecha: { 
     width: 70, 
     height: 70, 
     backgroundColor: "#E15B42", 
     borderRadius: 35, 
     transform: [{scaleX: 1.2}] 
} 
});

import styled from 'styled-components'; 
const Bochecha = styled.View` 
width: 70px; 
height: 70px; 
backgroundColor: #E15B42; 
border-radius: 35px; 
transform: scaleX(1.2); 
`; 
export default Bochecha;

import React from 'react'; 
import { View } from 'react-native'; 
import estilos from './estilos' 
export default function Olho({ estilosExtra }) { 
return <View style={[estilos.olho, estilosExtra]} > 
     <View style={estilos.brilho} /> 
</View> 
}

import { StyleSheet } from 'react-native'; 
export default StyleSheet.create({ 
olho: { 
     backgroundColor: "#000200", 
     width: 55, 
     height: 55, 
     borderRadius: 28, 
}, 
brilho: { 
     backgroundColor: "#FEFEFE", 
     width: 20, 
     height: 20, 
     borderRadius: 10, 
     marginTop: 8, 
     marginLeft: 27, 
} 
});

import styled from 'styled-components'; 
export const OlhoExterno = styled.View` 
background-color: #000200; 
width: 55px; 
height: 55px; 
border-radius: 28px; 
`; 
export const Brilho = styled.View` 
background-color: #FEFEFE; 
width: 20px; 
height: 20px; 
border-radius: 10px; 
margin: 8px 0 0 27px; 
`;

import React from 'react'; 
import { OlhoExterno, Brilho } from './estilos' 
export default function Olho({ estilosExtra }) { 
return <OlhoExterno style={estilosExtra} > 
     <Brilho /> 
</OlhoExterno> 
}

import { StyleSheet } from 'react-native'; 
// Início do código novo 
import styled from 'styled-components'; 
import Olho from './Olho'; 
export const OlhoDireito = styled(Olho)` 
transform: scaleX(-1); 
`; 
// Fim do código novo 
export default StyleSheet.create({ 
...

import React from 'react'; 
import { OlhoExterno, Brilho } from './estilos' 
export default function Olho({ style }) { 
return <OlhoExterno style={style} > 
     <Brilho /> 
</OlhoExterno> 
}

import React from 'react'; 
import { View } from 'react-native'; 
import funcaoEstilos from './estilos'; 
export default function Orelha({ direita = false }) { 
const estilos = funcaoEstilos(direita); 
return <View style={estilos.orelha}> 
     <View style={estilos.ponta} /> 
     <View style={estilos.marca} /> 
</View> 
}

import { StyleSheet } from 'react-native'; 
export default function (direita) { 
return StyleSheet.create({ 
     orelha: { 
     transform: [{rotate: direita ? "5deg" : "-5deg" }, {scaleX: direita ? -1 : 1 }] 
     }, 
     ponta: { 
     width: 0, 
     height: 0, 
        backgroundColor: "transparent", 
        borderStyle: "solid", 
        borderRightWidth: 120, 
        borderTopWidth: 75, 
        borderRightColor: "transparent", 
: , 
     : [{: }] 
     }, 
     : { 
     : , 
     : , 
: -, 
: , 
: , 
: , 
     } 
}); 
}

import styled from 'styled-components'; 
export const OrelhaExterna = styled.View` 
transform: rotate(-5deg) scaleX(${({ direita }) => direita ? -1 : 1}); 
`; 
export const Ponta = styled.View` 
width: 0; 
height: 0; 
background-color: transparent; 
border-style: solid; 
border-right-width: 120px; 
border-top-width: 75px; 
border-right-color: transparent; 
border-top-color: #000200; 
transform: rotate(270deg); 
`; 
export const Marca = styled.View` 
width: 135px; 
height: 135px; 
margin: -   ; 
: ; 
: ; 
`;

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Natalia Kelim Thiel

Inscreva-se em nossa Newsletter

O Projeto Base

Primeiros passos com styled-components

O Modelo tradicional

Antigo `src/Pikachu/Boca/index.js`

Antigo `src/Pikachu/Boca/estilos.js`

O Modelo estilizado

Novo `src/Pikachu/Boca/index.js`

Antigo `src/Pikachu/Nariz/estilos.js`

Novo `src/Pikachu/Nariz/index.js`

Antigo `src/Pikachu/Bochecha/estilos.js`

Novo `src/Pikachu/Bochecha/index.js`

Como funciona a herança de estilos

Antigo `src/Pikachu/Olho/index.js`

Antigo `src/Pikachu/Olho/estilos.js`

Novo `src/Pikachu/Olho/estilos.js`

Novo `src/Pikachu/Olho/index.js`

Olhos em `src/Pikachu/index.js`

Estilos dos olhos em `src/Pikachu/estilos.js`

Novos estilos em `src/Pikachu/estilos.js`

Novo olho em `src/Pikachu/index.js`

Permitindo herança no `src/Pikachu/Olho/index.js`

Acesso dinâmico às propriedades (props)

Antigo `src/Pikachu/Orelha/index.js`

Antigo `src/Pikachu/Orelha/estilos.js`

Novo `src/Pikachu/Orelha/estilos.js`

Agora um desafio:

Vantagens de usar styled-components react native em seus projetos

Explore por tópico

Leia também