反应本机图像阴影颜色

时间:2018-11-17 12:34:47

标签: image react-native shadow blur

我正在使用React-Native开发移动应用程序,我需要实现一个新组件。

示例:

enter image description here

所以,我的问题是,如何在组件上添加阴影/模糊图像?

我知道如何对图像进行模糊处理,但是我该怎么做?

谢谢

1 个答案:

答案 0 :(得分:1)

因此,基本上,您可以处理两个图像,即不透明度,blurRadius和绝对位置。

尝试:

<View style={{elevation:12, position:'absolute', left:100, top:100, elevation:12, borderRadius:50, borderWidth: 1, borderColor:'rgba(255, 255, 2555, 0.4)',  overflow: 'hidden',  opacity:0.3}}>
    <Image blurRadius={10} style={{width:300, height:150}} source={{uri:'https://image.shutterstock.com/image-photo/beautiful-garden-flowers-450w-257560639.jpg'}} />
</View>            
<View style={{position:'absolute', left:95, top:90, borderRadius:50, borderWidth: 0, borderColor:'rgba(255, 255, 2555, 0.4)',   overflow: 'hidden'}}>
    <Image style={{width:300, height:150, }} source={{uri:'https://image.shutterstock.com/image-photo/beautiful-garden-flowers-450w-257560639.jpg'}} />
</View>