-
[React Native] styled-components 설치 (cli, typescript)2/React Native 2023. 9. 27. 11:27
매번 검색하면서 하다가 이제 대충은 알지만 그래도 내가 정리하는 게 다시 보기 편할 것 같아서 정리한다.
styled-components 설치
yarn add styled-components styled-components-react-native --exact
styled-components 설치 시 beta 버전으로 설치되는 경우가 종종 있어서 --exact 를 통해 stable 버전을 설치하도록 했다.
styled-components/native 를 설치한다는 글들이 있는데, 아니고 styled-components-react-native 가 맞다.
yarn add @types/styled-components @types/styled-components-react-native -D
타입이 포함되어져 있지 않기 때문에 타입도 설치해 준다. 타입은 devDependencies 로 설치해 준다.
{ "extends": "@tsconfig/react-native/tsconfig.json", "compilerOptions": { "types": ["styled-components-react-native"] } }
그리고 가장 중요한 tsconfig.json
complierOptions 내부에 반드시 "types": ["styled-components-react-native"] 이 부분이 추가가 되어야 한다.
처음에 이걸 몰라서 몇 시간 헤매었던 기억이 있다.
import styled from 'styled-components/native'; const Main = styled.SafeAreaView` flex: 1; justify-content: center; align-items: center; `;
import 할 때 꼭 styled-components/native 를 해야 하고, StyleSheet 과는 달리 문자열에 따옴표를 안 쓴다던지,
px 을 반드시 붙여야 한다던지, bottom-left 같이 한 방향 조절하는 게 없다는 정도의 차이가 있으니 참고하면 좋을 것 같다.
'2 > React Native' 카테고리의 다른 글
[React Native] React Navigation 설치 및 사용법 (cli, typescript) (0) 2023.09.27 [React Native] 조건부 스타일 (StyleSheet, 상속, 배열) (0) 2023.09.13 [React Native] eslint 와 prettier 설정 (+타입스크립트) (0) 2023.09.13