反应本机图像阴影颜色
React Native Image Shadow Color
我正在使用 React-Native 开发移动应用程序,我需要实现一个新组件。
例子:
所以,我的问题是,如何在我的组件上添加这个阴影/模糊图像?
我知道如何在图像上制作模糊效果,但我该如何制作这种效果?
谢谢
所以,基本上您使用两个图像,不透明度、模糊半径和绝对位置。
尝试:
<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>
我正在使用 React-Native 开发移动应用程序,我需要实现一个新组件。
例子:
所以,我的问题是,如何在我的组件上添加这个阴影/模糊图像?
我知道如何在图像上制作模糊效果,但我该如何制作这种效果?
谢谢
所以,基本上您使用两个图像,不透明度、模糊半径和绝对位置。
尝试:
<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>