README

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}
/>

Usage no npm install needed!