react-native-vision-camera初始化后无法显示，一直停留在加载状态

以下是针对你的问题的排查和解决步骤：

1. 确认相机权限已正确配置并获取 #

useCameraDevices 在未获取相机权限时会返回空设备列表，导致 devices.back 始终为null，进而一直显示Loading组件。

配置权限声明： #

• iOS：在 Info.plist 中添加相机权限描述：

  <key>NSCameraUsageDescription</key>
  <string>需要访问相机以进行拍摄</string>
  

• Android：在 AndroidManifest.xml 中添加相机权限：

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

在组件中主动请求权限： #

使用Vision Camera提供的 useCameraPermission 钩子处理权限逻辑：

import { Alert, StyleSheet, View, useEffect } from "react-native";
import { Camera, useCameraDevices, useCameraPermission } from "react-native-vision-camera";
import { Loading } from "../components/Loading/Loading";

export const CameraScreen: FC = () => {
  const { hasPermission, requestPermission } = useCameraPermission();
  const devices = useCameraDevices();
  const device = devices.back;

  // 首次加载时请求权限
  useEffect(() => {
    if (!hasPermission) {
      requestPermission();
    }
  }, [hasPermission]);

  // 权限未授予或设备未加载时显示Loading
  if (!hasPermission || device == null) return <Loading />;

  return (
    <View style={style.screen}>
      <Camera
        device={device}
        isActive={true}
        style={StyleSheet.absoluteFill}
      />
    </View>
  );
};

const style = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: "#222",
  },
});

2. 排查设备兼容性问题 #

• 部分模拟器或老旧设备可能没有后置相机，可尝试切换到前置相机测试：将 devices.back 改为 devices.front。
• 优先在真实物理设备上测试，模拟器的相机模拟可能存在兼容性问题。

3. 验证依赖安装与配置正确性 #

• 确认已执行iOS的 pod install 和 Android的gradle同步操作。
• Android项目需确保 build.gradle 中的Kotlin版本不低于1.6.0（Vision Camera的最低要求）：

  buildscript {
    ext {
      kotlinVersion = "1.6.21"
    }
  }
  

4. 调试设备加载状态 #

添加日志打印查看设备列表返回值，定位问题根源：

console.log("相机设备列表:", devices);

如果打印结果为空，说明权限未正确获取；如果列表中有设备但back为null，说明当前设备无后置相机。

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