Expo Camera在开发构建与APK中扫码时显示黑屏问题

问题 #

使用expo-camera实现二维码扫描功能，在Expo Go中可正常运行，但打包成.apk或开发构建版本后，相机屏幕全黑，仅显示"切换相机"按钮。

用到的官方示例代码如下：

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

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

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

  if (!permission.granted) {
    return (
      <View style={styles.container}>
        <Text style={styles.message}>
          需要相机权限才能使用扫描功能
        </Text>
        <Button onPress={requestPermission} title="授予权限" />
      </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}>切换相机</Text>
          </TouchableOpacity>
        </View>
      </CameraView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  message: {
    textAlign: "center",
    paddingBottom: 10,
  },
  camera: {
    flex: 1,
  },
  buttonContainer: {
    flex: 1,
    flexDirection: "row",
    backgroundColor: "transparent",
    margin: 64,
  },
  button: {
    flex: 1,
    alignSelf: "flex-end",
    alignItems: "center",
  },
  text: {
    fontSize: 24,
    fontWeight: "bold",
    color: "white",
  },
}); 

解决办法 #

1. 补全相机权限配置 #

Expo Go会自动处理权限，但自行打包时必须在app.json/app.config.js中手动声明：

• 在expo.android.permissions数组中添加相机权限：

"permissions": [
  "android.permission.CAMERA"
]

• 针对Android 13+，在expo.plugins中配置权限说明：

"plugins": [
  [
    "expo-camera",
    {
      "cameraPermission": "需要访问相机以扫描二维码"
    }
  ]
]

2. 开发构建需重新生成依赖 #

如果使用开发构建，先确保依赖安装完成：

expo install expo-camera

然后重新构建开发版apk：

expo run:android --variant development

3. 检查权限状态 #

部分设备可能存在权限缓存问题，可在代码中添加日志确认权限是否正确获取：

console.log("相机权限状态:", permission);

也可以手动进入系统设置，检查应用的相机权限是否开启。

4. 验证视图渲染 #

临时给CameraView添加背景色，确认视图是否正常渲染：

<CameraView style={[styles.camera, { backgroundColor: 'red' }]} facing={facing}>

如果能看到红色区域，说明样式配置无问题，问题出在权限或原生配置环节。

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