在 React Native (RN) 应用开发中，图像和内存管理是性能优化的关键方面。与 Web 不同，移动应用中的图像加载和处理对内存消耗影响显著，不当处理可能导致应用崩溃。
前言
本文从图像和内存角度探讨如何构建高性能的 React Native 应用，延续之前关于引擎与渲染的优化讨论。
图像层面
在 RN 应用中，图像处理占优化的大部分。移动应用常涉及大量图片场景，加载过程复杂，且内存中图片大小常大于文件本身。
图片合理应用
不同平台上图像表现不一致：iOS 相对稳定，而 Android 可能出现问题。例如，小容器加载大图片（如 100x100 容器加载 1000x1000 图片）会导致 Android 底层压缩算法使内存暴涨，引发黑屏和闪退，称为“小马拉大车”。
解决方案是使用 Image 组件的 resizeMethod 属性。当图片尺寸与容器不匹配时，该属性决定调整策略：
resize：适用于小容器加载大图，在解码前修改内存数据，大小缩减约 1/8。scale：不改变字节大小，通过缩放调整宽高，依赖硬件加速，加载更快。auto：启发式自动选择，本地图片用resize，网络图片用scale。
最佳实践是匹配图片容器与图片大小。对于未知尺寸的远程图片，可使用 Image.getSize API 获取宽高：
import { Image } from 'react-native';
Image.getSize(imageUrl, (width, height) => {
console.log('宽度：', width, '高度：', height);
});
此外，可将压缩任务交给服务端，利用图床或 CDN 服务，在请求 URL 中指定宽高，服务器返回适配后的图片。
图片管理优化
RN 支持多种图片类型（如 PNG、JPG、Base64、GIF），其中 GIF 在 Android 需添加依赖。对于动图（如 SVG、SVGA），有相关生态库处理。
图片管理应根据场景选择合适方案。例如，大量 GIF 场景需平衡内存和磁盘缓存，通常采用三级缓存策略。对于网络图片加载问题，可使用 react-native-fast-image 库，它在 iOS 和 Android 上优化加载和内存。
内存层面
清除资源
关注细节以维护内存健康。例如，页面 A 有视频播放，跳转到页面 B 后，A 页面资源未释放，视频继续加载，导致内存增长。解决方案是在离开页面时停止或清空资源。
对于含大量 GIF 的列表页面，向下滚动会渲染更多 GIF，内存持续增加。优化方案是仅渲染视图范围内的真实 GIF，其他区域使用占位图或静态图片。
清除状态
管理全局状态，如 Redux 数据源、事件监听或 setTimeout 延时器，避免内存泄漏。
总结
本文从图像和内存两个方面介绍了 React Native 的性能优化手段，旨在为开发者提供启发。
参考
- React Native 性能优化指南
- 大前端跨端开发指南