Sprite Image

Sprite Image 是 web 上为减少网络请求次数而出现的一个图片加载优化方案。

CRN 也支持这个特性。

不过这个特性请不要滥用，因为使用 Sprite 的图片都是小的 icon，icon 直接打进包里对 app size 不会造成太大压力。

基于 CRN 的项目都是从本地加载，资源文件都是从本地加载。

对于本地图片，使用 Sprite Image 反而会增大不必要的内存消耗，所以 React-Native 项目基本没有使用 Sprite 的必要。

CRN 支持 Sprite Image 仅仅是为了兼容传统 H5 开发人员的习惯，使用 Sprite Image 有下列准则：

• 只支持远程直连图片 HTTP(S)://
• 不支持本地图片(沙盒 & bundle)

接口说明

SpriteImage 支持一个属性source。

source需要设置三个属性：

• uri 图片URL
• imageSize 整张 image 的大小 // {width, height}
• crop 需要截取的区域 // {top:, left: width: height:}

为了设备通用性，所有单位均为像素，SpriteImage 内部会做适配。

SpriteImage不支持响应点击事件，如果需要响应点击事件请自行用Touchable组件封装SpriteImage或者使用Button组件。

示例

<
SpriteImage
source={{uri:'http://pic.c-ctrip.com/h5/common/bg-global.png',imageSize:{width:480, height:294}, crop:{ top:248, left:0, width:44, height:44}}}

>
<
/SpriteImage
>

效果：

整张原图