React native 프로젝트 준비(typescript, styled-components, babel-plugin-root-import)

react native CLI 명령어를 사용하여 프로젝트를 생성합니다.

• react-native init projectname

Typescript, styled-components, babel-plugin-root-import를 설치합니다.

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

설치가 완료되면 타입스크립트 설정을 위해 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": {
      "~/*": ["*"]
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

절대 경로로 컴포넌트를 추가하기 위해 babel.config.js 파일을 열고 아래와 같이 수정합니다.

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

소스코드를 한곳에서 관리하기 위해서 src폴더를 생성하고 App.js파일을 App.tsx로 변경하고 src폴더로 이동시킵니다.

마지막으로 index.js 파일을 열어 아래와 같이 수정합니다.

import App from './App';
import App from '~/App';

App.tsx에서
import Styled from 'styled-components/native';이 부분에

react native could not find a declaration file for module 'styled-components/native

이와 같은 에러문구가 생기면

npm add @types/styled-components-react-native -D

추가 해주시면 됩니다.