css - 如何在LinearGradient上添加边框和主体模糊效果？

Question

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

##设计< ___ >我试过了##

这是这个设计的css样式。

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

我用 LinearGradient 和 BlurView 试过了，如下所示。

Here is the full code on 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>

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

Answer 1

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

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

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

希望对您有所帮助!