React Native函数式组件下Expo Camera闪光灯模式切换失效求助

1. 必查基础配置 #

• 确认你已将flash状态绑定到Camera组件的flashMode属性，这是最常见的遗漏点：

<Camera
  style={styles.camera}
  type={cameraType}
  // 必须添加这行，将状态同步到组件属性
  flashMode={flash}
>
  {/* 你的相机内部UI */}
</Camera>

2. 版本兼容修正 #

Expo SDK 48+ 已废弃Camera.Constants.FlashMode的写法，需单独导入闪光灯常量：

// 旧版本导入（SDK <48）
import { Camera } from 'expo-camera';
const [flash, setFlash] = useState(Camera.Constants.FlashMode.off);

// 新版本导入（SDK ≥48）
import { Camera, FlashMode } from 'expo-camera';
const [flash, setFlash] = useState(FlashMode.off);

对应切换逻辑也要同步修改常量引用，否则状态值和组件期望的枚举值不匹配，自然无法生效。

3. 修复状态更新闭包问题 #

将setFlash改为函数式更新，避免作用域闭包导致的状态取值错误：

onPress={() => {
  setFlash(prevFlash => 
    prevFlash === FlashMode.off ? FlashMode.torch : FlashMode.off
  )
}}

4. 交互区域校验 #

TouchableWithoutFeedback默认没有点击热区，需给组件明确设置宽高，或直接替换为TouchableOpacity避免点击事件不触发：

<TouchableOpacity 
  style={[styles.flash, {width: 50, height: 50}]}
  onPress={() => {
    // 切换逻辑
  }}
>
  <MaterialCommunityIcons
    name="flash"
    color={"#9c1937"}
    size={50}
  />
</TouchableOpacity>

5. 硬件兼容性判断 #

可添加设备闪光灯支持校验，避免无闪光灯设备静默失败：

// 初始化时判断设备是否支持闪光灯
const [isFlashAvailable, setIsFlashAvailable] = useState(false);

useEffect(() => {
  const checkFlash = async () => {
    const hasFlash = await Camera.hasFlashAsync();
    setIsFlashAvailable(hasFlash);
  }
  checkFlash();
}, [])

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