如何将borderRadius添加到ImageBackground？

Question

React Native ImageBackground组件应该接受与之相同的prop签名Image.但是,似乎并不接受borderRadius.

这没有任何影响.

<ImageBackground
  style={{height: 100, width: 100, borderRadius: 6}}
  source={{ uri: 'www.imageislocatedhere.com }}
>

你如何改变一个边界半径ImageBackground？

Answer 1

只需添加属性 overflow: 'hidden'

<ImageBackground
  style={{height: 100, width: 100, borderRadius: 6, overflow: 'hidden'}}
  source={{ uri: 'www.imageislocatedhere.com }}>

Answer 2

这需要一些挖掘,所以发布Q&A供其他人查找.

所述style支柱是在使用<View>,在包装了图像ImageBackground.style穿梭于嵌套<Image>组件的唯一属性是高度和宽度.

要将道具传递给图像,请使用imageStyle道具.

<ImageBackground
  style={{height: 100, width: 100}}
  imageStyle={{ borderRadius: 6}}
  source={{ uri: 'www.imageislocatedhere.com }}
>

Answer 3

如果您打算在 ImageBackground 项目中添加内容，那么您应该使用 JC Gras 的答案。

只需添加属性 overflow: 'hidden'

原因是，如果您imageStyle按照 GollyJer 推荐的方式使用该属性，那么 ImageBackground 中的内容将不会遵守 borderRadius，因此它会在边缘处出现 loll out。