使用expo-barcode-scanner后退出App，右上角相机图标残留问题求助

• 主动停止相机会话
  问题根源是App退到后台时，相机扫描会话仍在运行，系统因此持续显示相机使用图标。你需要监听App的后台状态，在App进入后台时主动停止扫描：

  1. 导入AppState：import { AppState } from 'react-native';
  2. 使用useRef保存当前App状态，结合useEffect监听状态变化：

  import { AppState, useRef, useEffect } from 'react-native';
  import { BarCodeScanner } from 'expo-barcode-scanner';
  
  export default function ScannerScreen() {
    const scannerRef = useRef(null);
    const appState = useRef(AppState.currentState);
  
    useEffect(() => {
      const handleAppStateChange = (nextAppState) => {
        // 当App进入后台时停止相机预览
        if (nextAppState === 'background') {
          scannerRef.current?.stopPreview();
        }
        appState.current = nextAppState;
      };
  
      const subscription = AppState.addEventListener('change', handleAppStateChange);
  
      // 组件卸载时清理监听并停止相机
      return () => {
        subscription.remove();
        scannerRef.current?.stopPreview();
      };
    }, []);
  
    return (
      <BarCodeScanner
        ref={scannerRef}
        onBarCodeScanned={/* 你的扫描回调逻辑 */}
        style={/* 自定义样式 */}
      />
    );
  }
  

• 条件渲染扫描组件
  另一种方式是在App进入后台时直接卸载BarCodeScanner组件，彻底释放相机资源：

  import { AppState, useState, useEffect } from 'react-native';
  import { BarCodeScanner } from 'expo-barcode-scanner';
  
  export default function ScannerScreen() {
    const [currentAppState, setCurrentAppState] = useState(AppState.currentState);
  
    useEffect(() => {
      const subscription = AppState.addEventListener('change', (state) => {
        setCurrentAppState(state);
      });
  
      return () => subscription.remove();
    }, []);
  
    return (
      <>
        {currentAppState !== 'background' && (
          <BarCodeScanner
            onBarCodeScanned={/* 你的扫描回调逻辑 */}
            style={/* 自定义样式 */}
          />
        )}
      </>
    );
  }
  

• 关于权限的说明
  不需要卸载相机权限，频繁申请/撤销权限反而会影响用户体验。核心是确保相机资源在App后台时被完全释放，上述两种方法都能解决图标残留问题。

内容的提问来源于stack exchange，提问作者Varga Máté