如何使用 react-native 制作模糊效果？

Question

如何使用 react-native 制作模糊效果？像“背景图像”

我想切换效果’blur’和’none’，’none’表示没有模糊效果

原文由 alucard.g 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

现在你可以在没有任何库的情况下使用 prop: blurRadius 来做到这一点。

例如

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

说明：数字（1）表示您要在图像上应用的模糊量，数字越大，图像越模糊。

不幸的是，这还不能在 Android 上运行（RN 0.40.0）。尽管如此，它对于只寻找 iOS 解决方案的人来说可能很有用。

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

原文由 Gui Herzog 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

安装 react-native-blur ：

 npm install react-native-blur

import BlurView from 'react-native-blur';

...
<BlurView blurType="light" style={styles.blur}>
...

原文由 JFAP 发布，翻译遵循 CC BY-SA 3.0 许可协议