无法使用组件“ImageBackground”创建圆角边框答案

【问题标题】：Can't create rounded border with component "ImageBackground"无法使用组件“ImageBackground”创建圆角边框
【发布时间】：2020-11-03 10:55:25
【问题描述】：

我需要创建类似的组件

这是我的部分代码

<ImageBackground source={{uri}} style={{width: 234, height: 165, marginTop: 10, borderRadius: 10}}>
  <Text style={{margin: 10, fontSize: 24, fontWeight: 'bold', color: 'white'}}>
      Test
  </Text>
  <Text style={{marginLeft: 7, marginTop: 80, color: 'white'}}>
    <Icons name="distance" size={25} style={{color: 'white'}}></Icons>
    <Text style={{color: 'white'}}>
      2 KM
    </Text>
    <Text>   </Text>
    <Icons name="star" size={25} style={{color: 'white'}}></Icons>
    <Text style={{color: 'white'}}>
      4.9
    </Text>
  </Text>
</ImageBackground>

道具样式borderRadius 不适用于组件ImageBackground。我尝试使用各种包装器，但没有得到任何结果，我也尝试使用Image 组件，但该组件不能包含其他组件（例如Text）

【问题讨论】：

虽然图片显示了所需内容，但它们可能会随着时间的推移而被删除，您的问题会丢失部分可能对未来读者有用的信息。代码应放置为文本（格式化为代码），因此它会创建minimal reproducible example。诸如 first 之类的图像很好，可以直观地描述您的需求，但永远不要将代码/错误发布为图像。您（或其他用户）应该用文本形式替换代码片段。

标签： react-native user-interface jsx mobile-development

【解决方案1】：

这样使用

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

【讨论】：