如何将borderRadius添加到ImageBackground？

Question

React Native ImageBackground组件应该接受与Image相同的prop签名。但是，它似乎不接受borderRadius。

这没有任何影响。

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

如何更改ImageBackground的边框半径？

Answer 1

这需要一些挖掘，所以发布Q＆amp; A供其他人查找。

style道具用在包裹<View>图像的ImageBackground中。 移植到嵌套style组件的唯一<Image>属性是高度和宽度。

要将道具传递给图像，请使用imageStyle道具。

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

The details are documented in the source code。

Answer 2

如果您打算在ImageBackground项目中添加内容，则应使用J.C. Gras的回答。

只需添加属性overflow: 'hidden'

原因是，如果您按照GollyJer的建议使用imageStyle属性，则ImageBackground中的内容将不遵守borderRadius，因此它将在边缘处散发出来。

Answer 3

只需添加属性overflow: 'hidden'

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

Answer 4

<ImageBackground
  style={{height: 50, width: 50}}
  imageStyle={{ borderRadius: 25}}
  source={{ uri: 'www.example.com/images/455.jpg' }}
>

这对我有用
// imageStyle是<ImageBackground/>

中使用的道具