reactnative如何导入元素根目录

发布于06月16日

App
 |-- application
      |-- config 
      |    |-- themes.js
      |    |-- redux.js
      +-- views
      |    |-- login
      |    |    |-- 登录.js  
      |-- 指数js

指数js

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

....
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的if方法

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

这样可以提高开发效率，避免错误路径等问题.我的英语不好.

推荐答案

Alias in React Native

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

然后，我们真的很难知道符号"../"在哪里，在更复杂的项目中，这是一匹夜母马.

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

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

我们有两种可能的解决方案来指向上述文件夹 struct 中的每个 node .

Use @providesModule(update:不适用于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';

Use babel-plugin-module-alias

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

使用:

安装babel cli

npm install --g babel-cli

安装babel插件模块别名.

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

创建一个文件.在根目录中添加babelrc或添加一个密钥babel:您的项目的包.json并添加以下代码行.

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

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