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

可以工作但不太“安全”的辅助解决方案是在文件中使用@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下载