开发者们常面对的一种需求就是类似web中的背景图(background-image
)。要实现这一用例,只需简单使用<ImageBackground>
组件,然后把需要背景图的子组件嵌入其中即可。
return (
<ImageBackground source={...}>
<Text>Inside</Text>
</ImageBackground>
);
我们可以通过 resizeMode
来实现图片的内容模式,这个属性的参数值和 background-size
很相似。
- cover: 图片居中显示,没有被拉伸,超出部分被截断;
- contain: 容器完全容纳图片,图片等比例进拉伸;
- stretch: 图片被拉伸适应容器大小,有可能会发生变形。
这里有个比较重要的属性imageStyle
,区别于style
,这个属性是针对于背景图片的样式,比如我们如何实现一个背景图的圆角。
首先要设置ImageBackground
的圆角,然后还要设置图片的圆角通过imageStyle
。