React-Native 앱만들기

앱만들기

$ npm i -g create-react-native-app || $ yarn global add create-react-native-app

$ create-react-native-app my-project

styled-components

$ npm install --save styled-components;
$ yarn add styled-components;

절대경로 지정

참고 ) https://velog.io/@shin6403/React-Native-Typescript-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%EB%B0%A9%EB%B2%95
$ yarn add babel-plugin-module-resolver

babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      "react-native-reanimated/plugin",
      [
        "module-resolver",
        {
          root: ["./src"],
          extensions: [
            ".ios.ts",
            ".android.ts",
            ".ts",
            ".ios.tsx",
            ".android.tsx",
            ".js",
            ".json",
          ],
          alias: {
            "@": "./src",
            "@Component": "./src/Component",
            "@Container": "./src/Container",
            "@assets": "./src/assets",
            "@Util": "./src/Util",
          },
        },
      ],
    ],
  };
};

jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"],
      "@Component/*": ["Component/*"],
      "@Container/*": ["Container/*"],
      "@assets/*": ["assets/*"],
      "@Util/*": ["Util/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "babel.config.js", "metro.config.js"]
}