React Native中Expo-Camera报错：无法解构非可迭代实例及CameraType问题

错误原因分析 #

• CameraType未识别：Expo Camera v13+版本后，CameraType不再作为独立导出成员，而是归属在Camera.Constants.Type路径下。
• 解构非可迭代实例：新版useCameraPermissions返回的是包含status和requestPermission的对象，若沿用旧文档的数组解构写法，会触发该类型错误。

修复步骤 #

1. 确认依赖版本 #

先确保安装的是expo-camera最新稳定版：

npx expo install expo-camera

2. 修正导入与CameraType引用 #

替换错误的导入代码：

// 错误写法
import { Camera, CameraType, useCameraPermissions } from 'expo-camera';

// 正确写法
import { Camera, useCameraPermissions } from 'expo-camera';
// 从Camera对象中获取CameraType
const CameraType = Camera.Constants.Type;

3. 修正useCameraPermissions的解构方式 #

将数组解构改为对象解构：

// 错误写法
const [permission, requestPermission] = useCameraPermissions();

// 正确写法
const { status: permissionStatus, requestPermission } = useCameraPermissions();

4. 完整可运行示例代码 #

import { useState } from 'react';
import { View, Button, Text } from 'react-native';
import { Camera, useCameraPermissions } from 'expo-camera';

export default function CameraExample() {
  const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);
  const { status: permissionStatus, requestPermission } = useCameraPermissions();

  if (!permissionStatus) {
    return <View />;
  }
  if (permissionStatus !== 'granted') {
    return (
      <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
        <Text>需要相机权限才能使用功能</Text>
        <Button onPress={requestPermission} title="请求相机权限" />
      </View>
    );
  }

  return (
    <View style={{ flex: 1 }}>
      <Camera style={{ flex: 1 }} type={cameraType}>
        <View
          style={{
            flex: 1,
            backgroundColor: 'transparent',
            flexDirection: 'row',
            justifyContent:'flex-end',
            padding:20
          }}>
          <Button
            onPress={() => {
              setCameraType(prev => 
                prev === Camera.Constants.Type.back 
                  ? Camera.Constants.Type.front 
                  : Camera.Constants.Type.back
              );
            }}
            title="翻转镜头"
          />
        </View>
      </Camera>
    </View>
  );
}

5. 权限配置检查 #

确保app.json中已添加相机权限声明：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "需要访问相机进行拍摄操作"
      }
    },
    "android": {
      "permissions": ["android.permission.CAMERA"]
    }
  }
}

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