react-native 使用绝对路径？而不是从'../../something/X'导入X？

Posted 2023-02-22

【中文标题】react-native 使用绝对路径？而不是从\'../../something/X\'导入X？

【英文标题】：react-native to use absolute paths? instead of doing import X from '../../something/X'?react-native 使用绝对路径？而不是从'../../something/X'导入X？

【发布时间】：2016-09-27 12:56:18

【问题描述】：

我想知道为我的项目使用完整路径的最佳方式。

例如，如果我正在导入一个组件，我不想做import Component from '../components/Component'，而只是做import Component from 'app/components/Component';

谁能帮帮我？

【参考方案1】：

要有绝对路径，

我正在考虑您的 package.json 在根目录中。

在里面，你的 package.json 添加一个新的属性名称，其值是你想要的，即

"name": "root"

然后导入与该路线相关的所有路线

import Component from root/components/Component

【参考方案2】：

您可以通过在 package.json 名称部分中找出您的应用程序的名称来使用绝对路径，然后在您的绝对路径前面使用它，即

import Component from MyApp/components/Component

这里有更多关于描述问题的信息https://github.com/facebook/react-native/issues/3099

【参考方案3】：

// Use this:
import MyUtilFn from 'utils/MyUtilFn';
// Instead of that:
import MyUtilFn from '../../../../utils/MyUtilFn';

你可以使用 babel-resolver：npmjs.com/package/babel-plugin-module-resolver。 希望对你有帮助

【参考方案4】：

在大家的回答之上

您实际上可以在其他文件夹的任何位置创建package.json

例如你有：

▾ assets/
  ▸ home/
  ▸ png/
    favicon.png
    icon.png
    splash.png
▾ components/
  ▸ display/
  ▸ filters/
  ▸ forms/
  ▾ images/home/
      feedback.js
    index.js
▸ crud/

如果您在 assets 文件夹中创建 package.json 并使用值

"name": "assets"

然后你可以使用assets/png/someimage.png在任何其他JS中导入

您还可以使用 babel 模块解析器，其中包含 babel.config.js（如果您使用的是 expo）

修改成这样：

module.exports = function (api) 
  api.cache(true);
  return 
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        
          root: ["./"],
          alias: 
            assets: "./assets",
            components: "./components",
            crud: "./crud",
            helpers: "./helpers",
          ,
        ,
      ],
    ],
  ;
;

【参考方案5】：

我尝试了很多方法。每个文件夹一个 package.json 文件对我来说听起来有点太多了。另外，我对此有疑问，因为它会开始抱怨我的 import React from 'react' 声明。

我找到的最佳解决方案是this one，基于babel.config.js（如果您使用的是Expo）。它使用babel-plugin-module-resolver，一个 40KB 的库，有数百万的下载量。有了它，你必须：

将您的babel.config.js 设置为：

module.exports = function(api) 
  api.cache(true);
  return 
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      [
        'module-resolver',
        
          root: ['.'],
          extensions: [
            '.ios.ts',
            '.android.ts',
            '.ts',
            '.ios.tsx',
            '.android.tsx',
            '.tsx',
            '.jsx',
            '.js',
            '.json',
          ],
          alias: 
            app: './src/app',
            helpers: './src/helpers',
            ...
          ,
        ,
      ],
    ],
  ;
;

这应该足够了。但是，如果您像我一样使用typescript，您可能还想通过阻止它抱怨导入来取悦您的 IDE。

如下编辑您的tsconfig.json：

  "compilerOptions": 
    ...
    "baseUrl": ".",
    "paths": 
      "app/*": ["./src/app/*"],
      "helpers/*": ["./src/helpers/*"],
      ...
    ,
    ...
  

我有点难以理解配置，因为那篇文章将app 显示为基本文件夹，而我使用的是src。没什么大不了的，只需将其转换为我的场景即可。我的文件结构如下，顺便说一句：

project
 - android
 - ios
 - src
   - app
   - helpers
 index.js

【讨论】：

“每个文件夹一个 package.json 文件对我来说听起来有点太多了。”您不必在每个文件夹中都放一个，您只需在“src”文件夹中放一个，然后从那里导入所有内容。涉及的配置要少得多，并且不存在由模块解析器插件引起的问题。在过去，我无缘无故地让模块解析器中断，这最终花费了我很多时间，我不得不完全放弃它来完成这个项目。 Package.json 方法永远不会中断