如何在 react-native 中正确设置路径答案

【问题标题】：How to set paths properly in react-native如何在 react-native 中正确设置路径
【发布时间】：2019-11-25 03:29:33
【问题描述】：

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

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

我见过一些应用程序，没有'../../../'s 的路径更加清晰和优雅。我怎样才能在 React-Native 中实现这一点？

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

【问题讨论】：

如何使用绝对路径

标签： javascript node.js reactjs typescript react-native

【解决方案1】：

这是可能的。我做过，但我不推荐。当 xcode 启动 bundler 时它不起作用，因为您必须执行 npm start -- --reset-cache。您必须使用变通方法来了解您的 IDE 了解此路径。它不适用于 Flow。

您可以使用 npm babel-plugin-module-resolver。 Metro budler 使用 Babel。

.babelrc.

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

【讨论】：

【解决方案2】：

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

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

flow、Xcode 等都没有问题

【讨论】：

【解决方案3】：

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

webpack.config.js：

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

你的.js.file.js

import '@/utils/classComponentHooks';

如果您不将 wepback 用于 react-native（尽管可以）。你也可以试试.babelrc

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

【讨论】：