React Native Vision Camera初始化异常：相机无法正常显示

核心问题分析 #

首次加载时相机画面无法渲染，通常是由于权限获取完成后相机设备未完全初始化就渲染了Camera组件，或者组件激活时机过早导致的。以下是针对性的修复方案：

1. 使用官方权限 Hooks 替代手动请求 #

react-native-vision-camera 提供了useCameraPermission和useMicrophonePermission，能更可靠地跟踪权限状态，避免手动请求的时序问题。

修改代码：

// 导入新增的 Hooks
import {Camera, useCameraDevice, useCameraPermission, useMicrophonePermission} from "react-native-vision-camera";

function App() {
  // 替换原有的权限请求逻辑
  const cameraPermission = useCameraPermission();
  const microphonePermission = useMicrophonePermission();
  const [isLoading, setIsLoading] = useState(true);
  const [refreshKey, setRefreshKey] = useState(0); // 用于强制刷新相机组件

  // 监听权限状态变化
  useEffect(() => {
    // 权限拒绝时跳转设置
    if (cameraPermission.status === 'denied' || microphonePermission.status === 'denied') {
      Linking.openSettings();
    }

    // 权限全部授予后，延迟初始化相机确保设备就绪
    if (cameraPermission.status === 'granted' && microphonePermission.status === 'granted') {
      setTimeout(() => {
        setRefreshKey(prev => prev + 1);
        setIsLoading(false);
      }, 500);
    }
  }, [cameraPermission.status, microphonePermission.status]);

  // ... 其他状态和逻辑
}

2. 优化 Camera 组件的激活与刷新 #

• 添加key属性配合refreshKey状态，确保权限就绪后强制刷新相机组件
• 控制isActive属性，仅在权限和设备都就绪时激活相机

修改 Camera 组件：

const device = useCameraDevice(isFrontCamera ? 'front' : 'back');
const isCameraActive = cameraPermission.status === 'granted' && microphonePermission.status === 'granted' && device != null;

// ... 渲染部分
<Camera
  key={refreshKey}
  style={StyleSheet.absoluteFill}
  ref={camera}
  device={device}
  isActive={isCameraActive}
  video={true}
  audio={true}
  videoQuality="1080p"
/>

3. 修复函数组件中错误的this引用 #

原代码中 Video 组件使用了this，在函数组件中应改用useRef：

const playerRef = useRef(null);

// ... 当 recordedVideo 存在时的 Video 组件
<Video
  source={{uri: recordedVideo.path}}
  ref={playerRef}
  onBuffer={() => {}}
  onError={(error) => console.error('播放错误:', error)}
  repeat={true}
  muted={isMuted}
  controls={true}
  resizeMode="cover"
  style={StyleSheet.absoluteFill}
/>

4. 额外优化：监听设备变化确保相机切换稳定 #

添加监听设备变化的逻辑，避免切换相机时出现异常：

useEffect(() => {
  if (device != null && isCameraActive) {
    // 设备切换后确保相机重新激活
    setRefreshKey(prev => prev + 1);
  }
}, [device, isCameraActive]);

验证方案 #

完成上述修改后：

1. 首次打开应用时，权限获取完成后会延迟初始化相机，确保设备就绪
2. 通过key属性强制刷新组件，解决首次加载的渲染异常
3. 严格控制相机激活时机，避免无效渲染

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