如何在React Native中实现局部模糊效果

嘿，我刚好做过类似的图片聚焦效果！之前也试过直接用Blur+Overlay搞不定，后来发现用多层叠加+遮罩的思路就能完美实现，给你两种可行的方案，按需选就行：

这个方案只加载一次图片，性能更优，适合复杂场景。需要先装两个依赖：

# npm
npm install @react-native-community/blur @react-native-masked-view/masked-view

# 或者yarn
yarn add @react-native-community/blur @react-native-masked-view/masked-view

然后是组件代码：

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { BlurView } from '@react-native-community/blur';
import MaskedView from '@react-native-masked-view/masked-view';

const FocusedImage = ({ imageUri, focusSize = 200 }) => {
  return (
    <View style={styles.container}>
      {/* 底层：完整的清晰原图 */}
      <Image source={{ uri: imageUri }} style={styles.image} resizeMode="cover" />
      
      {/* 模糊遮罩层：只让周围区域显示模糊效果 */}
      <MaskedView
        style={styles.maskedContainer}
        maskElement={
          <View style={styles.mask}>
            {/* 透明圆形=聚焦的清晰区域，改成矩形就去掉borderRadius */}
            <View style={[styles.focusArea, { width: focusSize, height: focusSize }]} />
          </View>
        }
      >
        {/* 模糊处理的图片 */}
        <BlurView
          style={styles.blurLayer}
          blurType="dark"
          blurAmount={10}
          reducedTransparencyFallbackColor="#000"
        >
          <Image source={{ uri: imageUri }} style={styles.image} resizeMode="cover" />
        </BlurView>
        
        {/* 可选：半透明黑层，增强聚焦区域的对比度 */}
        <View style={styles.overlay} />
      </MaskedView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    position: 'relative',
  },
  image: {
    width: '100%',
    height: '100%',
  },
  maskedContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  mask: {
    width: '100%',
    height: '100%',
    backgroundColor: '#000', // 遮罩的不透明区域（隐藏模糊层）
    justifyContent: 'center',
    alignItems: 'center',
  },
  focusArea: {
    borderRadius: 100, // 圆形聚焦区
    backgroundColor: 'transparent', // 透明区域（透出底层清晰图）
  },
  blurLayer: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    top: 0,
    left: 0,
  },
  overlay: {
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0,0,0,0.4)',
    position: 'absolute',
    top: 0,
    left: 0,
  },
});

export default FocusedImage;

原理说明 #

• 底层放清晰原图作为基础
• MaskedView通过遮罩控制：只有透明的聚焦区域会透出底层的清晰图，其他区域显示模糊后的图片+半透明遮罩
• 你可以调整focusSize改聚焦区域大小，blurAmount调模糊程度，overlay的透明度也能按需修改

如果不想装MaskedView的依赖，用绝对定位叠加三层也能实现，代码更简单：

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { BlurView } from '@react-native-community/blur';

const SimpleFocusedImage = ({ imageUri, focusSize = 200 }) => {
  return (
    <View style={styles.container}>
      {/* 底层：整张模糊图 */}
      <BlurView style={styles.blurLayer} blurType="dark" blurAmount={10}>
        <Image source={{ uri: imageUri }} style={styles.image} resizeMode="cover" />
      </BlurView>
      
      {/* 中间层：半透明遮罩 */}
      <View style={styles.overlay} />
      
      {/* 顶层：裁剪出的清晰聚焦区域 */}
      <Image
        source={{ uri: imageUri }}
        style={[styles.focusImage, { width: focusSize, height: focusSize }]}
        resizeMode="cover"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: '100%',
    height: '100%',
  },
  blurLayer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  focusImage: {
    borderRadius: 100, // 圆形聚焦区，去掉就是矩形
    zIndex: 1,
  },
});

export default SimpleFocusedImage;

注意事项 #

• 这个方案会加载两次图片，本地图没问题，网络图建议做好缓存
• 安卓端使用BlurView时，记得检查AndroidManifest.xml是否配置了必要权限（如果是网络图片）

内容的提问来源于stack exchange，提问作者EladA