React Native - styled component

Styled Component

Javascript 파일 안에 style 코드를 작성할 수 있는 라이브러리.

style이 적용된 component를 만드는 라이브러리이다.

 

CSS에서 작성하듯이 style코드를 작성할 수 있다.

(참고:기존 RN에서의 style 코드 작성 방법은 아래 참고)

https://joylee-developer.tistory.com/146

React Native - style 적용하기

 

다운로드

npm install styled-components

styled-components를 다운받는다.

 

작성방법

import styled from 'styled-components/native';

styled를 import해야 사용할 수 있다.

 

Tagged Template Literals 문법에 따라 styled-component를 만든다.

const 컴포넌트이름 = styled.기존컴포넌트`
	스타일코드
`

스타일코드는 `(백틱)`으로 감싸준다.

 

주의사항

• styled를 import할 땐 'styled-components/native'에서 가져와야 한다.
• 기존 컴포넌트는 RN에서 제공하는 컴포넌트를 사용해야 한다.

 

사용

아래의 두 가지 방법 모두 사용 가능하다.

<컴포넌트이름 />
<컴포넌트이름></컴포넌트이름>

기타 부수적인 코드가 없어서 깔끔하고, 해당 컴포넌트의 역할을 명확하게 구분할 수 있다.

 

스타일 재사용

상속

기존 스타일을 전체 상속받아서 새로운 스타일을 만들 수 있다.

const 컴포넌트이름 = styled(상속받을컴포넌트)`
	스타일코드
`

직접 코드로 작성하면 아래와 같다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// ... import styled from "styled-components/native";   const Container = styled.View`   flex: 1;   background-color: #fff;   align-items: center;   justify-content: center; `;   export default function App() {   return (     <Container>       <StatusBar style="auto" />     </Container>   ); } Colored by Color Scripter

cs

`백틱`안의 코드들이 css와 동일한 문법으로 작성되었고, 오류 없이 잘 작동한다.

 

* View Component를 사용해 컴포넌트를 만들긴 했지만 View를 실제로 사용한 것이 아니기 때문에

import View from "react-native";를 쓰지 않아도 된다.

 

 

스타일코드 따로 작성하기

스타일코드만 따로 작성해서 사용할 수 있다.

import { css } from 'styled-components/native';

const 스타일이름 = css`
	스타일코드
`

// 스타일 컴포넌트 만들 때 사용가능
const 컴포넌트이름 = styled.컴포넌트`
	${스타일이름}
	스타일코드
`

import styled, {css} from "styled-components/native";
 
const cssText = css`
  font-size: 20px;
  font-weight: 600;
`
 
const StyledText = styled.Text`
  ${cssText}
  color: blue;
`
const ErrorText = styled.Text`
  ${cssText}
  color: red;
`

공통된 코드는 cssText에 저장하고, 다른 코드(color)만 따로 작성한다.

 

 

필수 Props

기본 컴포넌트를 가지고 만든 styled컴포넌트는 기존 컴포넌트에서 필수로 하는 props는 꼭 작성해줘야 한다.

const StyledButton = styled.Button`
  /* 생략 */
`
// ...
return (
    <StyledButton/> // 오류 발생
    <StyledButton title="Styled" onPress={() => alert("Styled!")}/> // 사용가능
)

오류가 발생한 경우

title과 onPress가 잘 작동함