react-native 如何导入项目根目录？

Question

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

索引.js

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

登录.js

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

我希望它是这样的:

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

如果 php 的方法

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

这样可以提高开发效率，避免走错路等问题。我的英文不好。

Answer 1

React Native 中的别名
在某一点上，您的项目中将有多个文件和文件夹。我们需要以任何随机的可能性从另一个文件中获取一个文件的引用。如果我们遵循相对路径，例如

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

那么我们真的很难通过符号“ ”来了解它的位置。 ../ ’而在更复杂的项目中，这是一场噩梦。

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

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

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

使用@providesModule ( 更新: 不适用于 RN 56 及更高版本。 https://github.com/facebook/react-native/issues/21152)

一个可行但不太“安全”的辅助解决方案是在您的文件中使用@providesModule。这带有较少的样板，但由于它基于 Facebook 自己的内部用例，它可能会根据他们的内部心血来潮进行更改。您可以在此处阅读更多相关信息: https://github.com/facebook/fbjs

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

/**
 * @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>
 );
 }
}

然后你可以像上面一样导入它:

import themes from 'login';

使用 babel-plugin-module-alias

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

用途:

安装 babel cli

npm install --g babel-cli

安装 babel-plugin-module-alias。

$ npm install --save babel babel-plugin-module-alias
在根目录中创建一个文件 .babelrc 或添加一个关键的 babel:您项目的 package.json 并添加以下代码行。

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

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

 npm start -- --reset-cache

完整源代码可从 here下载