Question

我在borderRadius组件上遇到嵌套内容的问题Image。我不明白为什么borderRadius: 15没有显示任何内容。如果我删除嵌套的<Text>行，则边框半径可以正常工作。

return (
 <View style={[styles.imageContainer, styles.margins]}>
   <Image source={IMAGES.loginBackground} style={styles.image}>
     <Text>Itinéraire</Text>
   </Image>
 </View>
)

const styles = StyleSheet.create({
  imageContainer: {
    backgroundColor: "#f0f",
    height: 170,
  },
  image: {
    borderRadius: 15,
    position:'absolute',
    left:0,
    right:0,
    top:0,
    bottom:0,
    padding: 10,
    width: undefined,
    height: undefined,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
}

我做错了吗？

Answer 1

我测试了你的代码，它在这里运行良好。唯一的区别是我使用source={require('imgpath/img.png')}并没有将View样式设置为数组，因为styles.margins没有代码。您是否在其他地方设置了任何样式，例如styles.margins？

另外我注意到你在styleSheetCreate的末尾错过了)：

const styles = StyleSheet.create({
  imageContainer: {
    backgroundColor: "#f0f",
    height: 170,
  },
  image: {
    borderRadius: 15,
    position:'absolute',
    left:0,
    right:0,
    top:0,
    bottom:0,
    padding: 10,
    width: undefined,
    height: undefined,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
}

看起来应该是这样的：

const styles = StyleSheet.create({
  imageContainer: {
    backgroundColor: "#f0f",
    height: 170,
  },
  image: {
    borderRadius: 15,
    position:'absolute',
    left:0,
    right:0,
    top:0,
    bottom:0,
    padding: 10,
    width: undefined,
    height: undefined,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
});

我还建议您将const styles添加到render()之外。

希望它有所帮助。

Answer 2

您可以使用<View>在图像上设置透明边框，例如：

<View style={{borderRadius:10}}>
    <Image  borderRadius={10} ....   />
</View>

具有嵌套内容和borderRadius的图像

2 个答案: