如何在React-native中模糊背景视图？

68bkxrlz 于 2022-11-17 发布在 React

关注(0)|答案(1)|浏览(186)

有没有办法在不使用任何外部库的情况下在react-native中模糊背景？
例如，以下代码在Web版本中会模糊，

div {
  background-color: rgba(28, 28, 28, 0.8);
  backdrop-filter: blur(14px);
}

我试着使用blurRadius和backdropfilter，但都不起作用。

1条答案

如果我理解正确的话，我认为您可以使用View具有低不透明度

<View style={{height:200, width:200 ,opacity:0.5,backgroundColor:'gray'}}>
    <Text>Blur</Text>
</View>

或者您可以使用ImageBackground

<ImageBackground
  source={require('YOUR_BACKGROUND_IMAGE')}
  blurRadius={90}>

   ....

</ImageBackground>