基于Expo Camera实现相机对焦时发声功能的技术方案咨询

Hey Andrew, 我之前做项目时刚好碰到过类似需求，用Expo生态就能搞定对焦发声的功能，下面是我亲测有效的实现思路：

核心逻辑：监听对焦状态变化 + 触发音频播放 #

1. 抓住Expo Camera的对焦状态回调 #

Expo Camera组件自带的onFocusChanged属性是实现功能的关键。这个回调会在相机对焦状态变动时触发，返回的参数里包含isFocused（是否对焦成功）、focusPoint（对焦坐标）等核心信息。

你可以通过这个回调精准捕捉时机：当isFocused从false切换为true时，就是播放对焦成功提示音的最佳时刻。如果想优化体验，还可以结合用户点击屏幕触发对焦的操作（比如onTouchStart），提前播放一段"对焦启动"的预备音。

2. 用Expo Audio模块处理音效播放 #

借助Expo的expo-av库（内置Audio模块）就能轻松实现音频播放，步骤很清晰：

• 先安装依赖：npx expo install expo-av
• 在组件初始化阶段提前加载音效文件（比如短促的点击声、确认音），避免播放时出现延迟
• 在对焦状态触发时，调用音频实例的playAsync()方法

3. 代码示例参考 #

import React, { useState, useEffect, useRef } from 'react';
import { Camera } from 'expo-camera';
import { Audio } from 'expo-av';
import { View, Text } from 'react-native';

export default function FocusSoundCamera() {
  const [hasPermission, setHasPermission] = useState(null);
  const cameraRef = useRef(null);
  const focusSuccessSound = useRef(null);

  useEffect(() => {
    // 请求相机权限 + 预加载音效
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');

      // 加载对焦成功音效，替换成你自己的音效路径
      const { sound } = await Audio.Sound.createAsync(
        require('./assets/focus-success.mp3')
      );
      focusSuccessSound.current = sound;
    })();

    // 组件卸载时释放音频资源
    return () => {
      if (focusSuccessSound.current) {
        focusSuccessSound.current.unloadAsync();
      }
    };
  }, []);

  const handleFocusChange = async ({ isFocused }) => {
    // 仅在对焦成功时播放音效
    if (isFocused && focusSuccessSound.current) {
      await focusSuccessSound.current.replayAsync();
    }
  };

  const handleManualFocus = (event) => {
    const { locationX, locationY } = event.nativeEvent;
    if (cameraRef.current) {
      // 点击屏幕触发手动对焦
      cameraRef.current.focus({ x: locationX, y: locationY });
      // 可选：播放对焦启动提示音
      // await focusStartSound.replayAsync();
    }
  };

  if (hasPermission === null) return <View />;
  if (hasPermission === false) return <Text>无相机访问权限</Text>;

  return (
    <View style={{ flex: 1 }}>
      <Camera
        ref={cameraRef}
        style={{ flex: 1 }}
        type={Camera.Constants.Type.back}
        onFocusChanged={handleFocusChange}
        onPress={handleManualFocus}
      />
    </View>
  );
}

4. 避坑小贴士 #

• 防抖处理：如果开启自动对焦，onFocusChanged可能会频繁触发，建议用防抖函数（比如lodash.debounce）避免重复播放音效
• 音频格式兼容：确保音效文件是MP3、WAV这类跨平台支持的格式，放在项目assets目录下
• 设备适配：不同Android/iOS设备的对焦事件触发逻辑略有差异，记得在目标设备上测试调试

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