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

Question

我需要使expo + react本身具有线性渐变和模糊效果。

## 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>

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

Answer 1

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

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

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

希望它会帮助您！