alias配置
安装
npm i -D babel-plugin-module-resolver
js
// babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./app'],
extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
alias: {
'@app': './app',
'@config': './app/config',
'@assets': './app/assets',
'@icons': './app/assets/images/icons'
}
}
]
]
}使用
js
// 使用alias导入组件
import Btn from '@components/btn'
// 使用alias导入静态资源
const assets = {
icons: {
mainTabs: {
home: {
// 导入资源【动态使用时报错, eg: require(`@icons/${xxx}.jpg`)】
active: require('@icons/home-active.png'),
inactive: require('@icons/home.png'),
},
// ...
},
},
}