Question

在我的React-Native应用程序中，导入路径是这样的。

import {
  ScreenContainer,
  SLButton,
  SLTextInput,
} from '../../../../../components';
import { KeyBoardTypes } from '../../../../../enums';
import { SIGN_UP_FORM } from '../../../../constants/forms';

我看过一些应用程序，没有'../../../'的路径更加清晰优雅。我如何在React-Native中实现呢？

我在解决方案中看到，在每个文件夹中都有一个package.json文件。我不确定这是否是正确的方法。

Answer 1

您需要在webpack.config.js中配置别名。您可以找到一个示例here和here

webpack.config.js：

  alias: {
    '@': path.join(__dirname, 'src')
  }

your.js.file.js

import '@/utils/classComponentHooks';

如果您不将wepback用于本机反应（尽管可以）。您也可以尝试.babelrc

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

Answer 2

有可能。我做完了我不推荐。当xcode启动捆绑程序时，它不起作用，因为您必须执行npm start -- --reset-cache。您必须使用变通办法来了解您的IDE理解此路径。它不适用于Flow。

您可以使用npm babel-plugin-module-resolver。巴别塔由地铁大佬使用。

.babelrc。

{
  "presets": ["react-native"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "src": "./src",
          "root": "./"
        }
      }
    ]
  ],
}

Answer 3

从React Native版本0.55开始（我不确定确切何时启用），您可以仅使用项目名称作为路径根。

import {DatePanel} from 'MyProject/components/panels';
import HomeScreen from 'MyProject/screens/HomeScreen';

流程，Xcode等没有问题。

如何在react-native

3 个答案: