前言

最近在群里发现有人问类似于高斯模糊的效果怎么实现，正好前段时间作者开源的RN项目OneM中使用到了这一技术，所以在这作者单独的一个实现高斯模糊效果的Demo示例给到大家，供大家学习参考。想查看作者的完整RN项目OneM请点击

预览效果图

gif

如何使用

• npm install react-native-blur --save
• react-native link react-native-blur
• import {BlurView, VibrancyView} from 'react-native-blur'

<BlurView
  style={styles.absolute}
  viewRef={this.state.viewRef}
  blurType="light"
  blurAmount={10}
/>

更多用法请查看官方文档

https://github.com/react-native-community/react-native-blur

核心代码

render() {
    return (
      <View style={styles.container}>
        <Image
          ref={(img) => { this.backgroundImage = img}}
          source={{uri}}
          style={styles.absolute}
          onLoadEnd={this.imageLoaded.bind(this)}
        />
        <BlurView
          style={styles.absolute}
          viewRef={this.state.viewRef}
          blurType="light"
          blurAmount={10}
        />
        <Text>Hi, I am some unblurred text</Text>
      </View>
    )
  }
  

Demo示例源码地址

https://github.com/guangqiang-liu/react-native-gaussianBlurDemo

总结

react-native-blur 组件的使用还是很简单的，同学们可以直接下载Demo示例查看使用方法即可，或者直接在官方文档中查看详细的使用教程。

福利时间

• 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发)：https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
• 作者简书主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
• 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！