最近一次应用 react-native
进行构建时呈现因 metro
构建缓存导致的事变。
事件的起因是这样的,在 babel.config.js 中引入babel-plugin-root-import
plugins: [
[
"babel-plugin-root-import",
{
"rootPathSuffix": "src/",
"rootPathPrefix": "@"
}
]
]
而后,因为 @符号与 npm 中的一起包名抵触,像
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
会呈现找不到 无奈导入 ’@react-navigation/bottom-tabs’的问题,问题很容易就找到起因所在,因而将 "rootPathPrefix": "@"
改成 "rootPathPrefix": "~"
.
然而问题并无奈解决,在运行时还是呈现 无奈导入 ’@react-navigation/bottom-tabs’.
就算是禁用 "babel-plugin-root-import"
也无奈导入。
应该缓存导致的问题,因为构建打包采纳的是 metro
,因而查问了一下文档,通过resetCache
解决了这个问题。
// metro.config.js
module.exports = {
resetCache:true, // 减少这一行
...
}
resetCache=true
的作用是每次构建时均清空缓存,其默认是 false,能够放慢构建速度。
然而在某些状况下会呈现因缓存导致的问题。
论断:
当在运行 React-Native
呈现一些问题时,能够尝试通过清空缓存来解决。
- 进入 android 文件夹,运行
gradlew clean
,清空 android 构建缓存。 - 配置
metro.config.js
文件中的resetCache=true
, 清空打构建缓存