如何使用打字稿在react-native应用程序中正确配置绝对导入?

时间:2019-08-14 15:37:01

标签: typescript react-native

我正在尝试基于以下内容在应用程序中配置绝对导入 react-native init MyApp --template typescript

这是我的项目结构:

root
    -src
      -components
            -Header.tsx

      -screens
            -Categories.tsx
package.json
babel.config.js
tsconfig.json
...

我正在尝试将类别中的标头导入为

import Header from 'components/Header'

但是它无法解析路径...

enter image description here

我尝试了很多配置,这是我的最新配置:

babel.config.json

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['module-resolver', {
      'root': ['./src'],
      'extensions': ['ts', 'tsx', '.js', '.jsx', '.es', '.es6', '.mjs']
    }]
  ]
};

tsconfig.json

...
"baseUrl": ".",
    "paths": {
      "*": ["./src/*"]
    },

它不起作用。

react-native --reset-cache

对我也不起作用。 帮助:)

1 个答案:

答案 0 :(得分:0)

要获取类别,应将其移至上一个文件夹。

import Header from '../components/Header'