无法使用组件 "ImageBackground" 创建圆角边框

Question

我需要像这样创建组件

这是我的部分代码

<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）

Answer 1

这样使用

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

无法使用组件 "ImageBackground" 创建圆角边框

Can't create rounded border with component "ImageBackground"

user-interface

jsx

mobile-development

react-native