帶嵌套內容和borderRadius的圖像

Question

我在使用嵌套內容的Image組件上有borderRadius問題。我不明白爲什麼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()外添加。

希望它有幫助。