React native 如何导入项目根目录？

index.js

App
 |-- application
      |-- config 
      |    |-- themes.js
      |    |-- redux.js
      +-- views
      |    |-- login
      |    |    |-- login.js  
      |-- index.js

login.js

....
import themes from './config/themes';
import themes from './config/redux';
...

我希望是这样的：

....
import themes from '../../config/themes';
import themes from '../../config/redux';
...

php的if方法

....
import themes from '@root/application/config/themes';
import themes from '@root/application/config/redux';
import ... from '@root/...';
...

---

这可以提高开发效率，避免错误路径和其他问题。我的英语不好。

我看到两种解决方案可以实现您的目标：

1）创建一个“主题”包

React本机打包程序的一个优点是，它将拾取项目目录结构中任何位置的任何“包”（或“节点模块”）

import themes from '../../config/themes';

这意味着在

config

目录中，可以有一个

themes

目录，其中包含

package.json

（带有“themes”的“name”字段）和

index.js

（

index.js

将包含您现在在“application/config/themes”中的代码）

然后，当您想要导入此代码时，只需执行以下操作：

从“主题”导入主题

记住，你可以把这个“包”放在你的目录结构中任何你想放的地方。虽然这并不是你想要的，但它绝对是一个有效的解决方案

2）使用@providesModule（更新：不适用于RN版本56及以上。）

第二种解决方案可以工作，但不太“安全”，即在文件中使用
@providesModule
。这是一个较少的样板，但由于它是基于Facebook自己的内部用例，它可能会根据他们的内部突发奇想而改变。您可以在此处阅读更多信息：

要使用它，您需要在文件顶部包含此注释：

$root = 'User/React-Native-Project/';
include $root.'/application/config/themes.php';

Your App Root Directory
 |-- app
      |-- component 
      |    |-- login
      |    |   |-- login.js
      +-- resources
      |    |-- icon
      |    |    |-- userupload.png  
 |-- index.ios.js
 |-- index.android.js

然后，您可以像上面一样导入它：

/**
 * @providesModule login
 */

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View
} from 'react-native';

export default class login extends Component{
 render(){
 return(
 <View>
 <Text> this is login page
 </Text>
 </View>
 );
 }
}

从“主题”导入主题

下面是一个在React原生项目中使用的示例：
使用babel插件模块别名

/**
 * @providesModule themes
 */

为项目根目录创建一个
.babelrc
文件

npm install --save babel babel-plugin-module-alias

启动命令：

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    ["babel-plugin-module-alias", [
      { "src": "./application", "expose": "app" }
    ]]
  ]
}

现在，我们可以执行以下操作：

   npm start -- --reset-cache

反应本机中的别名
在某一点上，您的项目中将有多个文件和文件夹。我们需要从另一个文件中随机获取一个文件的引用。如果我们遵循相对路径，例如

....
import themes from 'app/config/themes';
import themes from 'app/config/redux';
import ... from 'app/...';
...

然后，我们很难通过符号“。/”来了解它的位置，在更复杂的项目中，这是一匹夜母马

在这篇文章中，我们将找到这种情况下可能的解决方案和替代方案。让我们以一个具有以下文件夹结构的示例项目为例

import themes from '../../config/themes';

我们有两种可能的解决方案来指向上述文件夹结构中的每个节点

import themes from '../../config/themes';

使用@providesModule（更新：不适用于RN版本56及以上。）

第二种解决方案可以工作，但不太“安全”，即在文件中使用@providesModule。这是一个较少的样板，但由于它是基于Facebook自己的内部用例，它可能会根据他们的内部突发奇想而改变。您可以在此处阅读更多信息：

要使用它，您需要在文件顶部包含此注释：

$root = 'User/React-Native-Project/';
include $root.'/application/config/themes.php';

Your App Root Directory
 |-- app
      |-- component 
      |    |-- login
      |    |   |-- login.js
      +-- resources
      |    |-- icon
      |    |    |-- userupload.png  
 |-- index.ios.js
 |-- index.android.js

使用babel插件模块别名

一个巴贝尔插件，用于在巴贝尔过程中将目录重写为不同的目录（映射、别名、解析）。当您有不想与相对路径一起使用的文件时（尤其是在大型项目中），它特别有用

用途：

安装babel cli

import themes from 'login';

安装babel插件模块别名

$
npm安装--保存babel babel插件模块别名

在根目录中创建一个文件.babelrc或添加一个密钥babel:your project's package.json，并添加以下代码行

npm install --g babel-cli

最后清除缓存并重新启动节点服务器

"babel":{
  "plugins": [[
    "module-alias", [
      { "src": "./app", "expose": "app" },
      { "src": "./app/resources/icon", "expose": "icon" }
      ]
   ]]
 }

完整的源代码可以从
下载要使用babel插件，您需要babel预置react native：

添加巴别塔预设反应本机：

$npm i--保存开发人员巴别塔预设反应本机巴别塔插件模块别名

Add.LRC

```

```

反应本机运行ios
见：


您可以在根文件夹中创建包含{“name”：“root”}的package.json文件。请注意，这可能是一个不同于每个项目拥有的原始“package.json”的文件

如果您想使用另一个名为X的文件夹，请使用{“name”：“X”}填充package.json。因此，现在您可以在项目中简单地使用
从'X/foo'导入foo

有关更多信息，请查看这些


这实际上与React Native无关。我认为这更像是一个巴别塔问题。答案其实很简单，使用这个包。这允许您将模块说明符配置为URL解析器，以供Babel使用。它对于避免相对URL特别有用

首先，执行以下命令：

$npm安装--保存开发巴贝尔插件模块解析器

然后，在“.babelrc”文件或项目“package.json”文件的
babel
属性中，指定插件的选项：

“插件”：[[
“模块解析器”{
“根”：[“/应用程序”]
}
]]

最后，清除缓存并重新启动节点服务器

"babel":{
  "plugins": [[
    "module-alias", [
      { "src": "./app", "expose": "app" },
      { "src": "./app/resources/icon", "expose": "icon" }
      ]
   ]]
 }

$npm启动---重置缓存
使用。
现有的答案冗长、过时，使问题变得比需要的复杂得多。我觉得有义务补充一个简洁的答案来帮助别人

安装软件包：

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


使用以下内容在根目录中修改或创建
.babelrc
文件：

npm install --save-dev --save-exact babel-plugin-module-resolver

您可以将
/
更改为代码的根目录，如
/application
或其他内容

更新您的导入路径：

而不是写：

{
  "plugins": [
    [ "module-resolver", { "root": ["./"] } ] 
  ]
}

你可以这样写：

import themes from '../../config/themes';


利润

非常感谢，但这不是我需要的。我希望相对路径变成绝对路径。这样的进口文件将更便于作出反应