ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

React Native - 热更新且重载app后,新加的iconfont渲染失败

React Native - 热更新且重载app后,新加的iconfont渲染失败 一、原因分析虽然热更新后执行了 Updates.reloadAsync()重载jsbundle 但是此方法仅仅重置js层缓存的字体、图标库的映射关系。没有重置Native层的。二、缓存分2层缓存的内容三、如果每次热更新的ttf文件是新的那硬盘上的原本的ttf文件会被删除吗原本的热更新的包jsbundle会被删除吗解决方案 : 字体图标带上每次jsbundle的id./** * 热更新 reloadAsync 后原生进程不重启同名字体族fontFamily会继续使用native层缓存的旧 TTF * 且无法直接调用方法去清除native层字体映射缓存导致新图标显示为「?」。 * * 在热更新场景下把 updateId 拼进字体族名强制走一次新的原生字体注册。 */exportfunctionresolveIconFontFamily(baseName){if(!Updates.isEnabled||Updates.isEmbeddedLaunch||// 前跑的 JS Bundle是不是安装包里自带的那份embedded而不是后来从 OTA 服务器下载的更新包。!Updates.updateId){returnbaseName;}constsuffixString(Updates.updateId).replace(/-/g,).slice(0,8);return${baseName}_${suffix};}——————————————————————————————————constICON_FONT_MAP{[resolveIconFontFamily(customIconfont)]:require(~/assets/font/aliconfont/iconfont.ttf),// 目前只有这个字体库会不断更新// 其他写死字体库[newCustomIconfont.font_family]:require(~/assets/font/newUIiconfont/iconfont.ttf),qweather-icons:require(~/static/fonts/qweather-icons.ttf)};——————————————————————————————————const[fontsLoaded,fontsLoadedError]useFonts(ICON_FONT_MAP);// 立刻预加载 iconfont踩坑本意是每次热更新完都执行Font.unloadAsync手动卸载字体即下图方法。再加载字体。但是实际上在移动端此方法也会报错。也无法直接深入native层去清除字体映射缓存。
返回列表