关于react-native:ReactNative中metro构建缓存导致的事故

最近一次应用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,清空打构建缓存

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据