RN-Image & ImageBackground

[yq]

Image组件

[yq]

展位图

图片加载过程中先展示一个展位图是很必要的。

上图（左）没有展位图

利用defaultSource属性

A static image to display while loading the image source.

1. 展位图资源最好不要采用在线资源，
2. 官网的解决方案，比较简单。但是展位图和实际图之间切换比较生硬：

• 图片加载需要时间
• 图片加载完会立马展示，会造成闪烁。

渐进式加载图片

利用Animated和opacity更丝滑的切换展位图和实际图。

参考

1. How to show Loading Placeholder for Image in React Native
2. Beautiful placeholders for images in React Native
3. Progressive image loading in React Native
4. How Medium does progressive image loading

[yq]

ImageBackground

背景

ImageBackground组件为了实现CSS中background-image的功能。它通过展示一个Image组件作为另外一个组件的背景图片。

ImageBackground组件原理

ImageBackground组件创建的背景图所占的尺寸到底是谁的呢？是其子组件的尺寸么？

ImageBackground组件内部创建了一个Image组件，同时也创建一个View组件（就是上面提到的另外一个组件）作为Image组件容器， 这也是背景图占据的尺寸。

并且ImageBackground组件接受跟Image组件一样的props，除了一个区别 ：

1. style属性是添加个给容器组件的style，imageStyle属性才是添加给内部Image组件的style。同时imageRef属性也是指向内部Image组件的。

总结:

1. ImageBackground组件创建的背景图所占的尺寸是其组件本身的尺寸，而不是其子组件的尺寸。
2. style属性是添加给容器组件的style，imageStyle属性是添加给内部Image组件的style。
3. 可以简单理解为ImageBackground组件是一个带背景图的View组件。

参考

1. Set a component's background image
2. 官网：ImageBackground