XGImage 新光互联图片控件

项目背景

React Native自带的Image控件在缓存表现上存在较大的问题，基本可以认为没做什么缓存处理。为了解决这个问题，我们需要实现一个带有预期的缓存功能的图片控件: XGImage。

假若我们抛开React Native，在做原生开发的时候，不论是 iOS 还是 Android 都已经有一套自己成熟的图片缓存处理方案。比如 iOS 的 SDWebImage，YYWebImage等都是采用内存和硬盘两级的缓存方案对远程图片进行缓存处理。因此，我们不需要从零开始去实现所需的功能，只需要将这些现有方案桥接给React Native即可。

考虑到现有的情况，iOS 端采用YYWebImage，安卓采用Glide，而桥接方案则是参考了FastImage这个项目。为了可以快速上手使用，还有一些FastImage的功能残留，但它本身的处理做得并不好，因此并不建议使用，具体使用方案参考本文档。

已实现及后续计划实现内容

目标 | 进度 ---|--- 图片缓存 | ☑️ YYWebImage ☑️ Glide 图片格式 | ☑️ jpg☑️ png🕓 webp 可支持，但需测试覆盖🕓 更多格式根据需求进行适配 回调事件 | ☑️ 开始加载图片 onLoadStart☑️ 图片加载进度 onProgress☑️ 图片加载成功 onLoad☑️ 图片加载失败 onError☑️ 图片加载结束统一回调 onLoadEnd PlaceHolder | 🕓 支持使用本地图片作为默认图 OSS URL 处理 | 🕓 source 中支持额外的oss属性🕓 oss 支持width,height,quality,format等属性🕓 支持全局对oss进行配置🕓 针对oss对缓存策略进行优化 图片加载队列 | ⚠️ 优先级队列：不实现，只是网络请求发出先后问题，实际价值不大⚠️ 串行请求：不实现，请在业务层用回调函数自己实现 更多功能 | 🕓 请直接联系张斌或徐峰详聊

使用说明

安装

yarn add xgrn-image
react-native link xgrn-image

JS调用

import XGImage from 'xgrn-image';

// 远程图片
<XGImage
    style={styles.myImage}
    source={{uri: 'http://xxx.yyy.zzz/a.png'}}
    onLoad={(event) => console.warn(event.nativeEvent)}
    placeholderImage={img_pic}
    placeholderColor={'red'}
/>

// 本地图片
<XGImage
    style={styles.myImage}
    source={localImageID}
/>