React Native Typescript路径别名无法解析模块

Question

所以基本上，我使用 RN 主页中的命令行创建了 React Native with Typescript：\nnpx react-native init MyApp --template react-native-template-typescript

\n

之后，我运行该项目并成功构建。\n但是，当我添加路径别名来导入我的文件时，它引发了错误：Unable to resolve module #folder/file from ... could not be found within the project or in these directories: node_modules

\n

我已经在 Google 上遵循了一些教程和错误解决方案，但我没有遇到任何运气。

\n

这是我的.babelrc文件（我尝试将文件从 babel.config.js 更改为 .babelrc 正如某些解析器所说，但它仍然不起作用）

\n

{\n  "presets": ["module:metro-react-native-babel-preset"],\n  "plugins": [\n    [\n      "module-resolver",\n      {\n        "root": ["./src"],\n        "extensions": [\n          ".js",\n          ".jsx",\n          ".ts",\n          ".tsx",\n          ".android.js",\n          ".android.tsx",\n          ".ios.js",\n          ".ios.tsx"\n        ],\n        "alias": {\n          "#src/*": [\n            "./src/*"\n          ],\n          "#configs/*": [\n            "./src/config/*"\n          ],\n          "#actions/*": [\n            "./src/redux/actions/*"\n          ],\n          "#reducers/*": [\n            "./src/redux/reducers/*"\n          ],\n          "#store/*": [\n            "./src/redux/store/*"\n          ]\n        }\n      }\n    ]\n  ]\n}\n

\n

tsconfig.json

\n

{\n  "compilerOptions": {\n    /* Basic Options */\n    "target": "esnext", \n    "module": "commonjs",\n    "lib": [\n      "ES2017",\n      "DOM",\n      "ES2015",\n      "ES2015.Promise"\n    ], \n    "allowJs": true, \n    "jsx": "react-native",\n    "noEmit": true, \n    "incremental": true,\n    "importHelpers": true,\n    "isolatedModules": true,\n    "strict": true,\n    "moduleResolution": "node",\n    "baseUrl": ".", \n    "paths": {\n      "#src/*": [\n        "src/*"\n      ],\n      "#configs/*": [\n        "src/config/*"\n      ],\n      "#actions/*": [\n        "src/redux/actions/*"\n      ],\n      "#reducers/*": [\n        "src/redux/reducers/*"\n      ],\n      "#store/*": [\n        "src/redux/store/*"\n      ]\n    }, \n    "types": ["jest"],\n    "allowSyntheticDefaultImports": true, \n    "esModuleInterop": true, \n    "skipLibCheck": false, \n    "resolveJsonModule": true \n  },\n  "exclude": [\n    "node_modules",\n    "babel.config.js",\n    "metro.config.js",\n    "jest.config.js"\n  ]\n}\n

\n

我的文件夹和文件结构

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80assets\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80components\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80config\n\xe2\x94\x82       constants.ts\n\xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80redux\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80actions\n    \xe2\x94\x82       index.ts\n    \xe2\x94\x82       stateActions.ts\n    \xe2\x94\x82\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80reducers\n    \xe2\x94\x82       index.ts\n    \xe2\x94\x82       stateReducer.ts\n    \xe2\x94\x82\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80store\n            index.ts\n

\n

真的很期待收到你们的答案。太感谢了

\n

P/s：如果您不介意，请查看我的存储库：\n https://github.com/NotJackieTruong/rn_test_typescript

\n

Answer 1

对于博览会 v49+：

1. module-resolver 不是必需的，你可以从 babel-config 中删除它

2. 添加到app.json：

{
  "expo": {
    "experiments": {
      "tsconfigPaths": true
    }
  }
}

3. paths像往常一样定义tsconfig.json：

{
  "expo": {
    "experiments": {
      "tsconfigPaths": true
    }
  }
}

Answer 2

要完成这项工作，只需将package.json文件添加到您想要访问的每个目录中，并使用name其中的一个属性。例如：

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80assets\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80components\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80package.json\n

\n

package.json内容：

\n

{\n  "name": "components"\n}\n

\n

然后你可以像这样导入：

\n

import SomeComponent from \'components/SomeComponent\';\n

\n

还有一篇很好的文章描述了它是如何工作的。

\n