Question

我在图片中放置shadow时遇到了困难，我尝试将其放入View和Image，但它无效

<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%'
    },

Answer 1

您需要设置高程以查看阴影，就像您可以查看此snack一样，在您的Component中设置backgroundColor也有助于在Android和IOS中工作（我已经定义了透明的）

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 : "#0000"

        }

Answer 2

除了海拔（要使其在Android上运行）之外，这里的问题还在于溢出属性。阴影绘制在元素边界之外，因此会溢出阴影。

将溢出设置为“可见”，然后设置。

图像中的阴影反应原生

2 个答案: