react-native-vision-camera报错device为null，已授权相机权限求助

代码中的核心问题及修复 #

1. 权限与设备获取时机不匹配
   组件初始化时直接调用useCameraDevices，但此时相机权限可能还在请求流程中，导致设备列表无法正确加载。需要等待权限确认后再获取设备信息。

2. renderCamera函数else分支未返回组件
   原代码中else块的<Camera>组件没有return，即使device存在也不会渲染相机视图。

修复后的完整代码 #

import React, { useEffect, useState } from 'react';
import { Text, View, Linking } from 'react-native';
import { useCameraDevices, Camera } from 'react-native-vision-camera';

const App = () => {
  const [hasPermission, setHasPermission] = useState(false);
  const devices = useCameraDevices();
  const device = devices.back;

  useEffect(() => {
    requestCameraPermission();
  }, []);

  const requestCameraPermission = React.useCallback(async () => {
    const permission = await Camera.requestCameraPermission();
    if (permission === 'denied') {
      console.log("Permission not granted");
      await Linking.openSettings();
      setHasPermission(false);
    } else {
      setHasPermission(true);
    }
  }, []);

  function renderCamera() {
    if (!hasPermission || device == null) {
      console.log("device is null or no permission");
      return (<View><Text>Camera not working</Text></View>)
    } else {
      return (
        <View style={{ flex: 1 }}>
          <Camera
            style={{ flex: 1 }}
            device={device}
            isActive={true}
            enableZoomGesture
          />
        </View>
      )
    }
  }

  return (
    <View style={{ flex: 1 }}>
      {renderCamera()}
    </View>
  )
}

export default App;

额外排查点 #

• 确认安卓AndroidManifest.xml中已添加相机权限：

  <uses-permission android:name="android.permission.CAMERA" />
  

• 检查Vision Camera的gradle配置是否符合要求（如minSdkVersion需≥21，已添加相关依赖）
• 尝试重启Metro服务，执行./gradlew clean清理安卓构建缓存后重新编译

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