Javascript 图像中的阴影

我很难在图像中放置

阴影

，我尝试将其放置在

视图

和

图像

中，但没有效果

<View style={styles.ContainerImageProfile}>
    <Image style={styles.ImageProfile} source={{uri: 'profile.png'}} />
</View>

ContainerImageProfile: {
        width: 90,
        height: 90,
        borderRadius: 50,
        backgroundColor: 'red',
        overflow: 'hidden',
        marginTop: 100,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 50,

    },
    ImageProfile: {
        width: '100%',
        height: '100%'
    },

集装箱图像配置文件：{
宽度：90，
身高：90，
边界半径：50，
背景颜色：“红色”，
溢出：“隐藏”，
玛金托普：100，
阴影颜色：“#000”，
阴影偏移：{宽度：0，高度：2}，
阴影不透明度：0.8，
阴影半径：50，
},
图像配置文件：{
宽度：“100%”，
身高：“100%”
},

你需要设置仰角才能看到阴影，就像你可以签入这个一样，在你的组件中设置背景色也有助于在Android和IOS中工作（我定义了一个透明的）

除了提升（为了在Android上工作），这里的问题是溢出属性。阴影在元素边界之外绘制，因此它会溢出元素边界

---

将“溢出”设置为“可见”并显示您的集合。

您是要在内部还是外部添加阴影？

ContainerImageProfile: {

            width: 90,
            height: 90,
            borderRadius: 50,
            overflow: 'hidden',
            marginTop: 100,

            //Properties to setup your Shadow 

            shadowOffset: { width: 10, height: 10 },
            shadowColor: '#000',
            shadowOpacity: 1,
            elevation: 10,
            backgroundColor : "#000"

        }