Expo BarCodeScanner切出APP后相机冻结问题咨询及解决方案求助

问题分析与解决方案 #

我来帮你拆解这个相机冻结的问题，并给出可行的修复方案～

问题产生的原因

1. 相机资源的后台回收机制：当你按Home键把APP切到后台时，iOS/Android系统会自动暂停或释放相机这类敏感硬件资源，避免占用系统性能。但Expo的BarCodeScanner组件默认不会在APP回到前台时自动重启相机会话，导致相机画面冻结。
2. 过时的导航监听事件：你之前用的didFocus事件在React Navigation 5及以上版本已经被弃用了，换成了focus事件，这也是你之前的监听逻辑完全没生效的核心原因。

可行的修复方案

我们可以利用React Navigation官方推荐的useFocusEffect钩子，在页面重新获得焦点时重置相机状态，强制重启相机会话。下面是具体的代码修改示例：

import { useFocusEffect, useCallback } from '@react-navigation/native';
import { View, Button, StyleSheet } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { useState } from 'react';

export default function ScanScreen(props) {
  const [scanned, setScanned] = useState(false);
  // 新增状态控制相机组件的挂载/卸载
  const [isCameraActive, setIsCameraActive] = useState(true);

  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    props.navigation.navigate("EanProduct", { ean: data });
  };

  // 使用useFocusEffect监听页面焦点变化
  useFocusEffect(
    useCallback(() => {
      // 页面重新聚焦时，重置扫描状态并重启相机
      setScanned(false);
      // 先卸载相机组件，短暂延迟后重新挂载，强制重启相机会话
      setIsCameraActive(false);
      const timer = setTimeout(() => {
        setIsCameraActive(true);
      }, 100);

      // 清理定时器，避免内存泄漏
      return () => clearTimeout(timer);
    }, [])
  );

  return (
    <View style={{ flex: 1, flexDirection: "column", justifyContent: "flex-end" }}>
      {/* 只有isCameraActive为true时才渲染相机组件 */}
      {isCameraActive && (
        <BarCodeScanner
          onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
          barCodeTypes={[BarCodeScanner.Constants.BarCodeType.ean13]}
          style={StyleSheet.absoluteFillObject}
        />
      )}
      {scanned && (
        <Button title={"Tap to Scan Again"} onPress={() => setScanned(false)} />
      )}
    </View>
  );
}

方案说明

• useFocusEffect的优势：这是React Navigation专为页面焦点场景设计的钩子，会在页面进入焦点时执行回调，离开焦点时自动清理，比手动添加监听器更可靠，也避免了过时API的兼容问题。
• 相机组件重新挂载：通过isCameraActive状态控制相机组件的挂载与卸载，相当于强制重启了相机的初始化流程，让系统重新分配相机资源，解决冻结问题。

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