react-native - 如何在Expo和React Native中使用绝对路径导入？

Question

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

我查看了expo文档，找不到答案...在react社区中搜索主题时，我发现babel-plugin-module-resolver，但似乎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 

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

Answer 1

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


Expo init正在为您创建一个“ babel.config.js”。只需将“ plugins”键添加到“ babel.config.js”文件并添加别名即可。不再需要'env'键。

module.exports = function(api) {
  api.cache(true)

  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            assets: './assets',
            components: './src/components',
            modules: './src/modules',
            lib: './src/lib',
            types: './src/types',
            constants: './src/constants',
          },
        },
      ],
    ],
  }
}

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


从SDK v20.0.0开始，您可以使用常规的Babel Expo预设

{
  "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元素，将 plugins分隔并将 presets更改为 babel-preset-react-native-stage-0/decorator-support，则别名对我有用。

在16.0.0版上使用Expo.io
在以下世博论坛上找到此内容： https://forums.expo.io/t/relative-paths-with-expo/654/3

您能否验证这也适用于您的情况？

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