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

Question

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

index.js

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

login.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

完整的源代码可以从这里下载

Answer 2

使用babel-plugin-module-alias

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

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

{
  "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/...';
...

Answer 3

使用babel-plugin-module-resolver.

现有的答案是冗长的、过时的，并且使它比需要的更复杂。我觉得有必要添加一个简洁的答案来帮助他人。

1. 安装软件包：

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

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

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

   您可以更改./为代码的根目录，例如./application什么的。

3. 更新您的import路径：

   而不是写：

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

   你可以这样写：

   import themes from 'config/themes';
   

4. 利润！