기존 StyleSheet 로 만드는 건 코드가 너무 장황해진다..

React에서 잘 써먹은 요 녀석을 활용하자 🤗

1. 모듈 설치

   yarn add styled-components
   yarn add -D babel-plugin-styled-components @types/styled-components @types/styled-components-react-native
   

   babel.config.js 에 추가

   module.exports = {
     ...
     plugins: ['babel-plugin-styled-components'],
   };
   

2. vscode 플러그인 vscode-styled-components `` 안에 css 문법 적용

기본 응용

// ...
import styled from 'styled-components/**native**';

const App = () => {
  return (
    <Container>
      <Text>Hello world</Text>
    </Container>
  );
}

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`

export default App;

• native 전용으로 가져와야 한다.
• 내부 문법은 기존 css 문법 그대로 적으면 된다.

props로 동적 응용

const App = () => {
  return (
    <Container background="">
      <Text>Hello world</Text>
    </Container>
  );
}

interface IContainerProps {
  background: string;
}
const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: ${(props:IContainerProps) => props.background ? props.background : 'white'};
`

export default App;

추가적인 부분 Styed Components 참고