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

Question

I am trying to configure absolute imports in the application based on react-native init MyApp --template typescript

Here is my project structure:

root
    -src
      -components
            -Header.tsx

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

I am trying to import Header from Categories as

import Header from 'components/Header'

but it can't resolve a path...

I tried a lot of configurations and here is my latest:

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/*"]
    },

It doesn't work.

react-native --reset-cache

doesn't work for me too. Help :)

Answer 1

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

import Header from '../components/Header'