具有模糊背景的三角形视图

Question

我正在尝试模糊具有三角形形状的视图。三角形非常适合简单的View组件，但是当我使用BlurView时，它给了我一个正方形的模糊View。

任何想法如何解决这个问题？这是我当前的代码...

const Triangle = () => <View style={Style.triangle} />; => works
const BlurTriangle = () => <BlurView  blurType="dark" blurAmount={2} style={Style.triangle} />; => does not works => renders a blur square element

const Style = StyleSheet.create({
 triangle: {
  overflow: 'hidden',
  left: 10,
  width: 0,
  height: 0,
  backgroundColor: 'transparent',
  borderStyle: 'solid',
  borderLeftWidth: 8,
  borderRightWidth: 8,
  borderBottomWidth: 16,
  borderLeftColor: 'transparent',
  borderRightColor: 'transparent',
  borderBottomColor: 'rgba(0,0,0,0.3)',
  transform: [{ rotate: '180deg' }],
 },
});

任何想法如何制作三角形BlurView？ ：）