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

时间：2016-05-03 12:16:49

标签： react-native 

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';

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

7 个答案:

答案 0 :(得分：33)

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

下载完整的源代码

答案 1 :(得分：10)

使用babel-plugin-module-alias 

<td>

为项目根目录创建一个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

答案 2 :(得分：2)

我看到了两种解决方案来实现你想要的目标：

1）创建一个＆＃34;主题＆＃34;封装

React Native打包程序的一个好处就是它会接收任何＆＃34;软件包＆＃34; （或＆＃34;节点模块＆＃34;），它们位于项目目录结构的任何位置。

这意味着在您的config目录中，您可以拥有一个themes目录，其中包含package.json（＆＃34;名称＆＃34;＆＃39;主题＆ ＃39;）和index.js（index.js将包含您现在在＆＃39; application / config / themes＆＃39;中的代码。）

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

import themes from 'themes';

请记住，你可以放置这个＆＃34;包＆＃34;您希望在目录结构中的任何位置。虽然这不是＆＃34;确切地说＆＃34;你在寻找什么，它绝对是一个有效的解决方案。

2）使用@providesModule （ 更新： 不适用于RN 56及以上版本。https://github.com/facebook/react-native/issues/21152）

可以使用但不太安全的辅助解决方案是在您的文件中使用@providesModule。这带有较少的样板，但由于它基于Facebook自己的内部用例，它可能会根据其内部奇思妙想而改变。您可以在此处详细了解：https://github.com/facebook/fbjs

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

/**
 * @providesModule themes
 */

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

import themes from 'themes';

以下是React Native项目本身使用的示例：https://github.com/facebook/react-native/blob/master/Libraries/Text/Text.js#L9

答案 3 :(得分：2)

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

如果你想使用另一个名为X的文件夹，请用{“name”：“X”}填充package.json。所以现在你可以在项目中使用import foo from 'X/foo'。

有关详细信息，请查看这些内容。

https://github.com/facebook/react-native/issues/3099#issuecomment-221815006 https://medium.com/@davidjwoody/how-to-use-absolute-paths-in-react-native-6b06ae3f65d1

答案 4 :(得分：0)

这实际上并不是关于React Native的。我认为这更像是一个巴别塔问题。答案实际上非常简单 - 使用Module Resolver包。这允许人们配置供Babel使用的模块说明符到URL解析器。它对于避免相对URL特别有用。

首先，执行以下命令：

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

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

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

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

$ npm start -- --reset-cache

答案 5 :(得分：0)

使用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. 利润！

答案 6 :(得分：-1)

要使用babel插件，您需要babel-preset-react-native：

  1. 添加babel-preset-react-native：

    $ npm i --save-dev babel-preset-react-native babel-plugin-module-alias

  2. 添加.babelrc

    3. ```

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

    ```

    1. react-native run-ios

      2. 请参阅：

      https://www.npmjs.com/package/babel-preset-react-native

      https://github.com/tleunen/babel-plugin-module-alias

相关问题
最新问题