frontendReactNative

React native 절대경로 (absolute path) 설정하기

frontend, native, react, react native, react navigation, 리액트 네이티브
Views: 120

시작하기

React native 공식 홈페이지에서 제시하는 absolute path가 적용 되지 않는 경우가 있습니다.

React native 초기설정 포스트를 통해서 생성한경우

1
npx react-native init ProjectName --template react-native-template-typescript

템플릿으로 생성된것에 대해서 absolute path설정을 하겠습니다.

설정하기

설정하는 방법은 간단합니다.
다음과 같이 몇 줄만 추가해주면됩니다.

1
2
3
{
  "compilerOptions": {
    "baseUrl": "."
metro.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const path = require("path");
module.exports = {
  resolver: {
    extraNodeModules: {
      src: path.resolve(__dirname, "src"),
    },
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

설정이 완료되면, 다음과 같이 사용할 수 있습니다.

1
import Home from "src/screens/Home";

npm run ios or npm run android를 하면 실행이 됩니다.
만약 안될경우 npm start reset--cache커맨드 입력후 다시 실행시켜줍니다.

Share