React Native实现相机对焦区域清晰其余区域虚化的方案及相关库问询

你当前代码的问题 #

你现在的实现逻辑是将全屏BlurView直接覆盖在相机层上方，中间的圆形View只是叠加在BlurView之上的半透明提示层，没有对BlurView做镂空处理，所以模糊效果会覆盖整个屏幕，无法透出中间对焦区域的清晰画面。

具体实现方案 #

方案1：针对实时预览效果（仅界面显示虚化） #

使用@react-native-community/masked-view对BlurView做遮罩处理，让BlurView仅显示对焦圆形之外的区域，中间区域镂空透出下层清晰的相机画面。如果需要支持点击屏幕切换对焦位置，只需动态修改遮罩层中间圆形的坐标即可。

依赖安装

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

示例代码

import MaskedView from '@react-native-community/masked-view';
import { BlurView } from '@react-native-community/blur';

render() {
  return (
    <View style={styles.Container_All_Screen}>
      {/* 底层相机/图片层，全程清晰 */}
      <Image
        source={require('../../../assists/img/send.png')}
        style={{width: '100%', height: '100%', resizeMode: 'contain'}}
      />

      {/* 带镂空的模糊层 */}
      <MaskedView
        style={{position: 'absolute', width: '100%', height: '100%'}}
        maskElement={
          <View style={{flex: 1, backgroundColor: 'transparent'}}>
            {/* 遮罩逻辑：黑色区域会显示BlurView内容，透明区域会镂空透出下层 */}
            <View style={{flex: 1, backgroundColor: 'black'}} />
            {/* 中间圆形透明区域，对应对焦位置 */}
            <View
              style={{
                width: 100,
                height: 100,
                borderRadius: 50,
                backgroundColor: 'transparent',
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: [{translateX: -50}, {translateY: -50}]
              }}
            />
          </View>
        }
      >
        <BlurView
          blurType={'light'}
          blurAmount={100}
          reducedTransparencyFallbackColor={'white'}
          style={{width: '100%', height: '100%'}}
        />
      </MaskedView>

      {/* 可选：对焦框提示层 */}
      <View
        style={{
          width: 100,
          height: 100,
          borderWidth: 2,
          borderColor: 'red',
          borderRadius: 50,
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: [{translateX: -50}, {translateY: -50}]
        }}
      />
    </View>
  );
}

方案2：针对最终拍摄的照片输出虚化效果 #

如果需要拍摄后的照片也保留该虚化效果，仅做界面遮罩无法实现，需要对拍摄生成的原图做后期处理：

• 可使用react-native-image-filter-kit库，对输出的照片添加蒙版模糊效果，保留对焦区域清晰度
• 若使用Expo生态，可调用expo-image-manipulator对原图进行自定义裁剪和模糊处理

方案3：原生景深效果（效果最优） #

如果想要更自然的真实对焦虚化效果（类似系统相机的人像模式），可调用原生系统相机的景深能力封装RN模块：

• iOS端使用AVFoundation的景深数据API实现实时虚化
• Android端使用CameraX的人像虚化功能适配

内容的提问来源于stack exchange，提问作者Firas Abu Fares