首页 > 解决方案 > 在 React native Expo 中使用别名作为文件路径

问题描述

当我使用该alias路径时,我不断发现找不到该文件。

错误之一的示例:

无法解析文件 D:\Work\heatable-installer-app\heatable-installer-hub\screens\JobsScreen.tsx 中的“screens/JobsScreen/JobsListScreen”。

进口:

import JobsListScreen from '~/screens/JobsScreen/JobsListScreen';

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    "plugins": [
      [
        "module-resolver",
        {
          "root": "/",
          "alias": {
            "~/images": "./assets/images",
            "~/fonts": "./assets/fonts",
            "~/navigation": "./navigation",
            "~/hooks": "./hooks",
            "~/screens": "screens/*",
            "~/components": "components"
          }
        }
      ]
    ]
  };
};

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": "/",
    "paths": {
      "~/images": ["./assets/images/*"],
      "~/fonts": ["./assets/fonts/*"],
      "~/navigation": ["./navigation/*"],
      "~/hooks": ["./hooks/*"],
      "~/screens": ["./screens/*"],
      "~/components": ["./components/*"]
    },  
  },
}

标签: react-nativeexpo

解决方案


推荐阅读