【问题标题】:React Native Image Shadow Color反应原生图像阴影颜色
【发布时间】:2019-04-20 10:28:45
【问题描述】:

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

例子:

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

我知道如何在图像上进行模糊处理,但我该如何做呢?

谢谢

【问题讨论】:

    标签: image react-native shadow blur


    【解决方案1】:

    所以,基本上你使用两个图像,不透明度、模糊半径和绝对位置。

    试试:

    <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-blur 包,效果很好!
    • @Clowning 你是如何让它与react-native-blur 一起工作的?我没有好结果。请给我一个代码sn-p好吗?
    猜你喜欢
    • 1970-01-01
    • 2019-07-27
    • 1970-01-01
    • 2021-02-05
    • 2017-12-08
    • 2015-07-14
    • 2017-05-28
    • 1970-01-01
    相关资源
    最近更新 更多