如何优化react-native-maps动态图片覆盖层的重复加载问题？

我在用react-native-maps的Overlay组件展示由多张图片组成的动态覆盖层，目前通过状态中存储的图片ID拼接远程图片路径来渲染，代码如下：

<Overlay
   image={{ uri: `my-backend/public/${id-from-state}.png` }}
/>

这个方案能正常运行，但在循环切换图片ID时，每次都会重新请求图片，引发性能问题，还无端增加后端负担——推测react-native-maps底层没做图片缓存处理，哪怕是相同图片也会重复发起请求。

我梳理了几个可能的解决方案，想找最适合的优化方案：

• 通过CDN提供图片：能加快图片传输速度，减轻后端压力，但无法解决客户端重复请求的问题，不算最优解。
• 下载图片/转为base64：将图片下载到客户端本地（或转为base64格式），只需请求一次，之后从本地缓存加载，是当前场景下简单可行的方案。
• 自定义瓦片服务器渲染覆盖层：性能表现最佳，但配置复杂，对当前场景来说过于冗余。
• 替换react-native-maps：不清楚有没有其他适用于React Native的替代方案，欢迎推荐。

针对性优化建议 #

针对方案2，可以这样落地：

1. 使用react-native-fs（Expo项目用expo-file-system）提前将所需图片下载到本地缓存目录，记录每个图片ID对应的本地路径
2. 切换图片时，直接用本地路径作为Overlay的image uri，彻底避免重复请求
3. 如果图片体积较小，也可以提前将图片转为base64字符串，存在本地常量或状态中，直接引用即可

另外，也可以尝试在后端给图片响应添加Cache-Control缓存头，让客户端原生层缓存图片，但react-native-maps的Overlay组件可能不遵循常规缓存策略，所以本地存储的方式更可靠。

内容的提问来源于stack exchange，提问作者Kipnoedels