最近一次使用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,清空打构建缓存
03-05 14:06