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

debugcn 发表于 Dev

Can Poyrazoglu

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

他们似乎都没有工作。我也尝试了所有都没有@符号的情况（将其从软件包文件和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"
  }
}

Can Poyrazoglu

是我不好

而不是像这样使用它：

import MyComponent from 'package/path/MyComponent'

我正在使用：

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

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

import Page from 'components/core/Page';

效果很好。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。