Expo 51下使用expo-camera出现Cannot read property 'back' of undefined错误求助

问题描述 #

开发React Native应用时，使用expo-camera拍摄证件照片完成用户入职流程，持续遇到渲染错误：

Cannot read property 'back' of undefined

疑问：该错误是否与Expo 51版本有关？

代码片段 #

import { CameraView, CameraType, useCameraPermissions } from "expo-camera";
import { useState } from "react";
import { Button, StyleSheet, Text, TouchableOpacity, View } from "react-native";

export default function CameraApp() {
  const [facing, setFacing] = useState(CameraType.back);
  const [permission, requestPermission] = useCameraPermissions();

  if (!permission) {
    // Camera permissions are still loading.
    return <View />;
  }

  if (!permission.granted) {
    // Camera permissions are not granted yet.
    return (
      <View style={styles.container}>
        <Text style={styles.message}>
          We need your permission to show the camera
        </Text>
        <Button onPress={requestPermission} title="grant permission" />
      </View>
    );
  }

  function toggleCameraFacing() {
    setFacing((current) => (current === "back" ? "front" : "back"));
  }

  return (
    <View style={styles.container}>
      <CameraView style={styles.camera} facing={facing}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity style={styles.button} onPress={toggleCameraFacing}>
            <Text style={styles.text}>Flip Camera</Text>
          </TouchableOpacity>
        </View>
      </CameraView>
    </View>
  );
}

依赖版本 #

"expo": "~51.0.20",
"expo-camera": "^15.0.14",

错误原因 #

这个错误和Expo 51版本本身无关，核心问题是API适配错误：

• Expo Camera从v13开始（适配Expo 48+）就移除了CameraType对象，不再支持CameraType.back/CameraType.front的写法
• 当前使用的expo-camera v15（对应Expo 51）中，CameraType已被废弃，直接访问会得到undefined，进而触发该错误

解决方案 #

移除CameraType的导入，直接使用字符串字面量"back"和"front"指定相机朝向即可，修改后的代码如下：

import { CameraView, useCameraPermissions } from "expo-camera";
import { useState } from "react";
import { Button, StyleSheet, Text, TouchableOpacity, View } from "react-native";

export default function CameraApp() {
  const [facing, setFacing] = useState("back");
  const [permission, requestPermission] = useCameraPermissions();

  if (!permission) {
    return <View />;
  }

  if (!permission.granted) {
    return (
      <View style={styles.container}>
        <Text style={styles.message}>
          We need your permission to show the camera
        </Text>
        <Button onPress={requestPermission} title="grant permission" />
      </View>
    );
  }

  function toggleCameraFacing() {
    setFacing((current) => (current === "back" ? "front" : "back"));
  }

  return (
    <View style={styles.container}>
      <CameraView style={styles.camera} facing={facing}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity style={styles.button} onPress={toggleCameraFacing}>
            <Text style={styles.text}>Flip Camera</Text>
          </TouchableOpacity>
        </View>
      </CameraView>
    </View>
  );
}

额外提示 #

• 当前expo与expo-camera的版本组合是兼容的，无需调整版本
• 如果使用TypeScript，可以导入CameraFacingDirection类型获得类型提示，替代原有的CameraType

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