javascript - 图像中的阴影 React Native

Question

我在图像中放置阴影时遇到困难，我尝试将其放入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 ，在组件中设置背景颜色也有助于在 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 : "#000"

        }