# XGImage 新光互联图片控件


### 项目背景

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

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

考虑到现有的情况，iOS 端采用`YYWebImage`，安卓采用`Glide`，而桥接方案则是参考了[FastImage](https://github.com/DylanVann/react-native-fast-image)这个项目。为了可以快速上手使用，还有一些`FastImage`的功能残留，但它本身的处理做得并不好，因此并不建议使用，具体使用方案参考本文档。

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

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

### 使用说明

##### 安装
```
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}
/>
```