尝试在React Native中组织模块时无法解析模块

Question

我是React Native的新手，正在尝试将我的React Native类组织到模块中，以摆脱“ import from '../../../”一团糟。这是我非常简单的文件夹结构：

按照here的教程，我为每个文件夹构造了package.json：

{
    "name": "@foldername"
}

现在，我正在尝试导入Page（目前只是组件超类，默认情况下已导出到文件中）：

import Page from '@app/components/core';

但是无法解决。我也尝试过：

import Page from '@app/@components/@core';

import { Page } from '@app/@components/@core';

import { Page } from '@app/components/core';

import { Page } from 'app/components/core';

它们似乎都没有起作用。我还尝试了所有不带@的符号（将其从软件包文件和import语句中删除），但无济于事。

我如何组织组件以这种方式工作（如果我知道前面的@签名的作用，那会很好，因为我也看到一些没有它的教程）？

如果有帮助，这里是我的package.json在我的根文件夹中（没碰过，这是react-native init创建的方式）：

{
  "name": "redacted",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.3"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/runtime": "^7.4.2",
    "babel-jest": "^24.5.0",
    "jest": "^24.5.0",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

将babel-plugin-module-resolver添加到devDependencies。 如果您有.babelrc，则将其删除并添加babel.config.js。并在其中添加别名。看起来应该是这样

function babelConfig(api) {
  if (api) {
    api.cache(false);
  }

  const presets = ['module:metro-react-native-babel-preset'];
  const plugins = [
    [
      'module-resolver',
      {
        alias: {
          appColors: './src/Colors',
          appConstants: './src/Constants',
          components: './src/Components',
          screens: './src/Screens',
          utils: './src/utils'
        },
        cwd: 'babelrc'
      }
    ]
  ];

  return {
    presets,
    plugins
  };
}

module.exports = babelConfig;

然后您可以像这样使用导入

import { YourComonent } from 'components';

确保已导出为默认设置。 另外，请勿尝试将别名设置为大写字母

这适用于最新的本机（0.59.3）。

这是我的devDependencies

devDependencies": {
    "@babel/core": "7.4.0",
    "@babel/runtime": "7.4.2",
    "@react-native-community/eslint-config": "0.0.3",
    "babel-eslint": "8.2.2",
    "babel-jest": "24.5.0",
    "babel-plugin-module-resolver": "^3.2.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.10.0",
    "enzyme-to-json": "^3.3.5",
    "eslint": "5.15.3",
    "eslint-config-airbnb": "16.1.0",
    "eslint-plugin-import": "2.12.0",
    "eslint-plugin-jsx-a11y": "6.0.3",
    "eslint-plugin-react": "7.9.1",
    "eslint-plugin-react-native": "3.2.1",
    "jest": "24.5.0",
    "metro-react-native-babel-preset": "0.53.1",
    "react-test-renderer": "16.8.3"
  },

Answer 2

如果使用的是VSCode，则IDE的Intellisense不能仅识别package.json；否则，将无法识别。包含tsconfig / jsconfig JSON文件（TypeScript [ftw] / JavaScript）

在compilerOptions中添加：

"paths" : {
    "@alias1*" : ["./alias1/*"],
     .....
  }

对于所有别名。然后，编辑器应提取您的文件。

https://code.visualstudio.com/docs/languages/jsconfig

如果您选择不使用VSCode，请使用Babel：

如果您的项目不使用Webpack（例如，如果您正在使用React Native），则可以使用.babelrc文件和babel插件来设置别名。

首先，您需要使用yarn或npm安装babel-plugin-module-resolver。

完成此操作后，打开项目的.babelrc文件，并在plugins键下，添加以下内容：

[
  'module-resolver',
  {
    root: ['./src'],
    alias: {
      myAlias: './src',
    },
  },
];

或在根目录中使用package.json

Answer 3

那是我的坏事。

与其像这样使用它

import MyComponent from 'package/path/MyComponent'

我正在使用：

import MyComponent from 'package/path'（末尾没有我的课程文件）。

我已经正确导入了该文件（还删除了app软件包和@前缀，并在其components文件中将package.json作为软件包直接引用了）（包括组件名称）：

import Page from 'components/core/Page';

效果很好。

Answer 4

在 tsconfig.json 中，添加以下内容：

"compilerOptions": {
    "baseUrl": "app"
...
}