RN styled-components

styled-components

리액트에서 처음 styled-components를 사용해보았을 때 센세이션을 느껴 react-native에서도 사용할 것이다.
스타일을 컴포넌트화 해서 다양한 곳에 사용할 수 있고 props로 값을 넘겨 다양한 스타일링이 가능하다는 장점이 있다.

npm install styled-components
npm install @types/styled-components @types/styled-components-react-native //TypeScript

하지만 styled-component로 코드를 작성하면 치명적인 단점이 있다. className이 해시값으로 만들어지기 때문에 스타일을 수정할 때 애를 먹는다.
그래서 babel-plugin-styled-components는 해당 스타일의 컴포넌트 이름을 해쉬값 앞에 붙여 나온다.

npm install babel-plugin-styled-components

babel.config.js에 styled-components관련 부분 추가

plugins:[
...
"babel-plugin-styled-components",
]

https://styled-components.com/

styled-components