javascript - 在 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'

这将抛出以下错误:

Module not found: Can't resolve '/../Components/adapter' in 'E:\reactjs\learn\Project\src\screens'

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';