我正在尝试使用绝对导入路径,而不是使用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
有什么简单的方法可以导入绝对路径?
更新: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",
}
}]
]
}
最新的博览会用户(SDK版本> = 32(。
只需添加插件 babel.config.js 中的属性(在项目root目录中找到此文件(。
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
alias: {
'alias-name': './src/assets/bla/bla',
},
},
],
],
};
};
在对Laszlo Schurg的答案中贴上,以防有人遇到与Typescript相同的问题。
如果您使用的是Typescript,则还需要在tsconfig
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"@src/*": ["./src/*"],
"@assets/*": ["./assets/*"]
}
},
这是我的babel.config
plugins: [
...
[
"module-resolver",
{
alias: {
"@assets": "./assets",
"@src": "./src",
},
},
],
],
一段时间后试图使此工作。我可以通过DE解决.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",
}
}]
]
}
我将babel-preset-expo
的内容复制到我的.babelrc
。这不是最好的解决方案...但是它正常工作。
此处的更多详细信息
./src
|- package.json
|- Bar/
| `- index.js
`- Foo.js
package.json
{
"name": "~" // whatever u want
}
然后
import { Foo } from "~/Foo";
import { Bar } from "~/Bar";
// ...
i com带有此建议:
在您的tsconfig.json中:
<pre>
<code>
{
"compilerOptions": {
"baseUrl": "./app",
"paths": {
"Components": ["components/*"]
}
},
"include": ["app"]
}
</code>
</pre>
和vite.config.ts解决可能看起来像这样:
<pre>
<code>
resolve: {
alias: {
"Components": "app/components",
}
}
</code>
</pre>
只是简单地让您。
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
和这样的导入:
import Entypo from '@expo/vector-icons/Entypo';