react-native 背景 之 ImageBackground

3,746 阅读1分钟

开发者们常面对的一种需求就是类似web中的背景图(background-image)。要实现这一用例,只需简单使用<ImageBackground>组件,然后把需要背景图的子组件嵌入其中即可。

return (
  <ImageBackground source={...}>
    <Text>Inside</Text>
  </ImageBackground>
);

我们可以通过 resizeMode 来实现图片的内容模式,这个属性的参数值和 background-size 很相似。

  • cover: 图片居中显示,没有被拉伸,超出部分被截断;
  • contain: 容器完全容纳图片,图片等比例进拉伸;
  • stretch: 图片被拉伸适应容器大小,有可能会发生变形。

这里有个比较重要的属性imageStyle,区别于style,这个属性是针对于背景图片的样式,比如我们如何实现一个背景图的圆角。

首先要设置ImageBackground的圆角,然后还要设置图片的圆角通过imageStyle