ネストされたコンテンツと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')}を使用しており、styles.marginsのコードがないので、配列としてViewスタイルを設定していないことです。このようなスタイルを別の場所に設定していますか？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', 
    }, 
}); 

そして、私はまた、あなたのrender()外のごconst stylesを追加することをお勧め。

希望します。