如何在 LinearGradient 上添加边框和身体模糊效果？答案

【问题标题】：How to add border and body blur effect on LinearGradient?如何在 LinearGradient 上添加边框和身体模糊效果？
【发布时间】：2019-10-10 15:50:09
【问题描述】：

我需要在 expo + react native 上制作这种线性渐变和模糊效果。

##Design我试过了##

这是此设计的 css 样式。

background: linear-gradient(180deg, #FFFFFF -4.55%, rgba(255, 255, 255, 0) 80.21%);
opacity: 0.4;
filter: blur(16px);

我用LinearGradient 和BlurView 尝试了这个，如下所示。

这是snack上的完整代码。

<BlurView
  tint="light"
  intensity={10}
  blurType="dark"
  blurAmount={200}
  blurRadius={300}
>
  <LinearGradient
    colors={['#ffffff88', '#00000000']}
    style={{ height: 400, width: 100, alignItems: 'center', borderRadius: 5 }}>
    </LinearGradient>
</BlurView>

如何使它与设计相似？感谢您的关注。

【问题讨论】：

标签： css react-native expo

【解决方案1】：

您可以使用两个 LinearGradient 来实现。

一个是从上到下，另一个是从左到右。

那么你根本不需要使用BlurView。

希望对你有帮助！

【讨论】：

你能提供一些关于你的答案的代码吗？谢谢。