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

Question

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

按照此处的教程，我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';

他们似乎都没有工作。我也尝试了所有没有@符号的方法（从包文件和导入语句中删除它），但没有效果。

我如何组织我的组件以这种方式工作（如果我知道@前面的标志是做什么的，那就太好了，因为我也看过一些没有它的教程）？

这是我的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到 devDependency。如果您.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';

确保您已默认导出。另外，不要尝试使用大写字母设置别名

这适用于最新的react-native（0.59.3）。

这是我的 devDependency

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"
  },