概述

react-native-blur是一个基于React Native的模糊化背景组件。文章记录了使用过程中遇到的一些问题及解决方案，组件具体用法移步github。

简介

在App5.0版本改版的背景下，公司决定对基因宝App进行视觉升级，设计师在新设计稿中加了毛玻璃效果如下：

本着搬砖的心态直接找个轮子分分钟给他实现，没想到淌进了一滩浑水。原来在App里之前就有用过毛玻璃特效。但是在Android上一直效果不佳：

加载缓慢需要异步去开启模糊效果
某些机型无法显示

没错用的就是react-native-blur组件，所以扛着视觉升级的大旗开启了本次的优化之旅。

1.寻找替换组件

JavaScript为啥能从web攻占到服务端、App、桌面应用等地方，靠的是简单、易上手、人多力量大，轮子满天飞（遐想一番）。所以这个组件不能用换一个就是。于是：

emm第一个就是该组件，居然还是Star最多的。
接着往下看react-native-blurhash是用与图片渐进显示的方案Pass。
第三个库react-native-blur-overlay第一眼看到是这样的：

诶！！这不是让我找到了吗，轮子不好造但是好找啊，哈哈！！然鹅儿当我打开该仓库Issues的时候，emm要不下一个吧轮子虽好但是没人改bug啊。

再之后。。。就没有之后了，其他的库不是不符合要求就是Star个位数的。。。不敢用啊。还是回去看看传家宝react-native-blur吧。

2.版本升级

回到(https://github.com/Kureev/react-native-blur)后果断打开Issues查找问题，发现有人也有类似情况

接着翻看下边回答后找到了一个回答说是升级版本后可以正常使用（当前用的3.4.0版本）

于是迫不及待的对该依赖进行了升级，并写了一个小Demo，居然真的可以用了。大功告成！拜拜，下次再聊。

模糊前

模糊后

3？bugFix

咳咳。。果然程序员没有早下班，就在我信心满满的用于实际开发时发现App居然Crash了！！等等，刚才Demo没问题啊，不信邪的我把业务代码注释掉还原Demo一切正常，TAT我不玩了。

看了眼银行卡余额，emm我爱工作！工作是我快乐！于是又在Issues里翻江倒海，最终发现这个Crash问题会在Android上使用多个BlurView时稳定复现，也就是说。。Demo果然没问题。

最终在该仓库的一个PR中找到了解决方案。可能因为年久失修，该库很久没合PR了导致问题没被修复。

接下来就是把该仓库克隆一份手动改下源码，最后用克隆后的仓库进行依赖安装。最后效果见开头图示。

最后因为基于该库做了一层封装，磨平IOS、Android使用差异。

const BlurView = ({
    style,
    blurType,
    children,
    blurAmount
}) => (
    <View style={[styles.wrapStyle, style]}>
        <RNCBlurView
            blurType={blurType}
            blurAmount={blurAmount}
            style={styles.blurStyle}
        />
        {React.Children.map(children, (child) => child)}
    </View>
);

const styles = StyleSheet.create({
    wrapStyle: {
        overflow: 'hidden',
    },
    blurStyle: StyleSheet.absoluteFill,
});