React native 如何使用Expo和React Native的绝对路径导入？

我正在尝试使用绝对导入路径，而不是与和React Native的相对路径

我看了世博会的文件，找不到答案。。。我在react社区中搜索主题，但Expo似乎已经在使用它，因此我更改了我的

.babelrc

，以创建一些别名：

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source",
        ["module-resolver", {
          "root": ["./app"],
          "alias": {
            "Components": "./app/components",
          }
        }]
      ]
    }
  }
}

但我得到了以下错误：

Unable to resolve module '@expo/vector-icons/glyphmaps/Entypo.json' 
from '/Users/eduardoleal/Code/lua/rook/node_modules/@expo/vector-icons/Entypo.js': 
Module does not exist in the module map or in these directories:   /Users/eduardoleal/Code/lua/rook/node_modules/@expo/vector-icons/node_modules/@expo/vector-icons/glyphmaps ,   /Users/eduardoleal/Code/lua/rook/node_modules/@expo/vector-icons/glyphmaps  This might be related to https://github.com/facebook/react-native/issues/4968 To resolve try the following:   
1. Clear watchman watches: 'watchman watch-del-all'.   
2. Delete the 'node_modules' folder: 'rm -rf node_modules && npm install'.   
3. Reset packager cache: 'rm -fr $TMPDIR/react-*' or 'npm start --reset-cache'.
ABI16_0_0RCTFatal -[ABI16_0_0RCTBatchedBridge stopLoadingWithError:] __34-[ABI16_0_0RCTBatchedBridge start]_block_invoke_2 _dispatch_call_block_and_release _dispatch_client_callout _dispatch_main_queue_callback_4CF __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ __CFRunLoopRun CFRunLoopRunSpecific GSEventRunModal UIApplicationMain main start 0x0 

---

有什么简单的方法可以导入绝对路径吗？

经过一段时间的尝试，这项工作可以正常进行。我可以用de following

解决问题。babelrc

：

{
  "presets": ["babel-preset-react-native-stage-0/decorator-support"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "alias": {
        "react-native-vector-icons": "@expo/vector-icons",
        "@expo/vector-icons/lib/create-icon-set": "react-native-vector-icons/lib/create-icon-set",
        "@expo/vector-icons/lib/icon-button": "react-native-vector-icons/lib/icon-button",
        "@expo/vector-icons/lib/create-icon-set-from-fontello": "react-native-vector-icons/lib/create-icon-set-from-fontello",
        "@expo/vector-icons/lib/create-icon-set-from-icomoon": "react-native-vector-icons/lib/create-icon-set-from-icomoon",
        "@expo/vector-icons/lib/icon-button": "react-native-vector-icons/lib/icon-button",
        "@expo/vector-icons/glyphmaps": "react-native-vector-icons/glyphmaps",
        "$components": "./app/components",
        "$config": "./app/config",
        "$helpers": "./app/helpers",
        "$navigators": "./app/navigators",
        "$reducers": "./app/reducers",
        "$screens": "./app/screens",
        "$images": "./assets/images",
        "$fonts": "./assets/fonts",
        "$icons": "./assets/icons",
        "$videos": "./assets/videos",
      }
    }]
  ]
}

我将巴别塔预设博览会的内容复制到我的

.babelrc

。这不是最好的解决方案。。。但它工作正常

---

关于它的更多细节

只需简单即可。babelrc简单如下：

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}

import Entypo from '@expo/vector-icons/Entypo';

然后像这样导入：

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}

import Entypo from '@expo/vector-icons/Entypo';

更新：Expo v32.0.0及更高版本

Expo init正在为您创建一个

babel.config.js

。只需将

plugins

键添加到您的

babel.config.js

文件并添加您的别名。不再需要

env

键

module.exports=函数（api）{
api.cache（true）
返回{
预设：['babel-preset-expo']，
插件：[
[
“模块解析器”，
{
别名：{
资产：'./资产'，
组件：“./src/components”，
模块：'./src/modules'，
库：'./src/lib',，
类型：'./src/types'，
常量：'./src/constants'，
},
},
],
],
}
}

更新：Expo.io SDK v20.0.0的更改

由于SDK v20.0.0，您可以使用正常的巴别塔博览会预设

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "alias": {
        "alias-name": "./app",
      }
    }]
  ]
}

Expo.io SDK v19.0.0及之前版本

没有

root

-元素，分离

插件

并将

预设更改为
babel-preset-react-native-stage-0/decorator支持
，别名对我来说很有用

在16.0.0版上使用Expo.io

在以下世博论坛中找到：

你能证实这对你的案子也有效吗

{
  "presets": ["babel-preset-react-native-stage-0/decorator-support"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "alias": {
        "alias-name": "./app",
      }
    }]
  ]
}

适用于最新的expo用户（sdk版本>=32）

只需在您的babel.config.js中添加插件属性（在项目根目录中查找此文件）

package.json

{
  "name": "~" // whatever u want
}

然后

import{Foo}来自“~/Foo”；
从“~/Bar”导入{Bar}；
// ...
为什么要使用绝对路径？除了您的计算机之外，该代码在任何其他计算机上都不起作用。我更喜欢从“@components/A”导入
之类的东西，而不是从“../../../A”导入
之类的东西。也许“导入绝对路径”不是我的意思…@VojtechNovak它是项目根文件夹的绝对路径，不是根硬盘驱动器我想为自己的组件创建别名。。。所以这不是我需要的，它在生产中也起作用吗？它说环境就是发展它在世博会项目中非常有用，谢谢！在进行这些更改之后，您可能还需要运行expo r-c（这相当于expo的
warn start--reset cache
）以使其生效。