如何使用react-native进行模糊效果？ [英] how to make the blur effect with react-native?

问题描述

如何使用react-native进行模糊效果？比如'background-image'

how to make the blur effect with react-native ? like 'background-image'

我希望切换效果'模糊'和'无'，'无'意味着没有模糊效果

and i want to switch the effect 'blur' and 'none'，'none' means no blur effect

推荐答案

现在你可以在没有任何库的情况下使用道具这样做： blurRadius 。

Now you can do this without any library using the prop: blurRadius.

例如

<Image
    style={styles.img}
    resizeMode='cover'
    source={imgSrc} 
    blurRadius={1}
/>

说明：数字（1）表示您想要的模糊量要应用于图像，数字越高，图像越模糊。

Explanation: the number(1) means the amount of blur you want to apply on the image, the higher the number, the blurrier the image.

不幸的是，这在Android上还不起作用（RN 0.40.0） 。然而，对于那些只寻找 iOS 解决方案的人来说，这可能很有用。

Unfortunately, this doesn't work on Android yet (RN 0.40.0). Nevertheless, it could be useful to who's looking for only an iOS solution.

编辑：它现在似乎在Android上运行。

It seems to be working on Android now.

这篇关于如何使用react-native进行模糊效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！