React Native 프로젝트 설정 : typescript

#vscode 확장 프로그램 추가

React-Native/React/Redux snippets for es6/es7
vscode-styled-components

#vscode 확장 프로그램 추가

React-Native/React/Redux snippets for es6/es7 
vscode-styled-components 

#노드 패키지 매니저를 통해 설치하는 라이브러리, 모듈들의 버전 고정하기

npm config set save-exact=true 

#프로젝트 생성

react-native init {프로젝트명} 

#typescript 로 프로젝트 생성

react-native init {프로젝트명} --template typscript 

#특정 버전으로 프로젝트 생성

react-native init -version 0.59.10 {프로젝트명} 

#플러그인 설치

npm install --save styled-components 
npm install --save-dev typescript @types/react @types/react-native 
npm install --save-dev @types/styled-components babel-plugin-styled-components 
npm install --save-dev babel-plugin-root-import 
npm install --save-dev typescript-styled-plugin 

#typescript
- tsconfig.json

{ 
  "compilerOptions": { 
    "allowJs": true, 
    "allowSyntheticDefaultImports": true, 
    "esModuleInterop": true, 
    "isolatedModules": true, 
    "jsx": "react", 
    "lib": ["ES6"], 
    "moduleResolution": "node", 
    "noEmit": true, 
    "strict": true, 
    "target": "esnext", 
    "baseUrl": "./src", 
    "paths": { 
      "~/*": ["*"] 
    }, 
    "plugins": [ 
      { 
        "name": "typescript-styled-plugin", 
        "tags": ["Styled", "styled", "css", "sty"] 
      } 
    ] 
  }, 
  "exclude": [ 
    "node_modules", 
    "babel_config", 
    "metro.config.js", 
    "jest.config.js" 
  ] 
} 

#절대경로로 컴포넌트 추가
- babel.config.js

module.exports = { 
  presets: ['module:metro-react-native-babel-preset'], 
  plugins: [ 
    'babel-plugin-styled-components', 
    [ 
      'babel-plugin-root-import', 
      { 
        rootPathPrefix: '~', 
        rootPathSuffix: 'src', 
      }, 
    ], 
  ], 
}; 

#styled-components : 컴포넌트에서 import 할 때 styled의 "s" 대소문자 주의

 

#안드로이드 실행
react-native run-android

react-native run-android 

#ios 실행 

react-native run-ios