在 react-native 中使用相对路径

Question

我正在尝试使用 react-native 中的相对路径导入模块，我的项目结构是这样的：

-Project
--Components
--- adapter.js
--src
---screen
----Main.js
--App.js

我想在我的 Main.js 中使用 adapter.js ，所以在Main.js我使用：import adapter from '/../Components/adapter'

这将引发以下错误：

找不到模块：无法解析“E:\reactjs\learn\Project\src\screens”中的“/../Components/adapter”

Answer 1

您可以使用https://github.com/tleunen/babel-plugin-module-resolver，这是一个很好的模块，可以在导入时使用别名。

你必须在 React Native 中指定一个 babel.config.js 和一个配置：

  module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          components: './src/components',
          _main: './src/components/_main',
          screens: './src/screens',
          config: './src/config',
          navigations: './src/navigations',
          utils: './src/utils',
          actions: './src/state/actions',
          constants: './src/state/constants',
          contexts: './src/state/contexts',
          reducers: './src/state/reducers',
          assets: './src/assets/',
          hooks: './src/hooks',
          data: './src/data',
        },
      },
    ],
  ],
};

之后，您可以像这样导入模块：

import HomeFeed from 'components/Home';

Answer 2

注意：VSCode 会检测导入

您需要添加一个tsconfig.js文件

下一行

"baseUrl": "src"