iOS独立版App中expo-camera预览持续黑屏问题求助

问题详情 #

• 已在app.json的infoPlist中配置NSCameraUsageDescription
• 请求相机权限时屏幕空白，用户授权后预览仍黑屏
• 开发环境（Expo App）、expo build后在Expo App中打开均正常
• 仅通过eas build提交至App Store Connect后，TestFlight或独立版App出现异常
• 使用的expo-camera版本："expo-camera": "~12.2.0"

相关代码 #

相机组件渲染代码 #

return (
  <View>
    {previewVisible && capturedImage ? (
      // 预览图片逻辑
    ) : (
      <Camera 
        style={styles.camera}
        type={type}
        ref={camera}
        flashMode={'auto'}
        whiteBalance={"sunny"}
      >
        <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'flex-end' }} >
          <LinearGradient style={[{ padding: 15, elevation: 10, paddingBottom: 25 }]} colors={['transparent', 'black']}>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }} >
              <TouchableOpacity onPress={voltarEcraAnterior} style={[styles.previewButtons, styles.circle]}>
                <Icon name="icon-cross" style={styles.iconButtonsCamera} size={40}></Icon>
              </TouchableOpacity>
              <TouchableOpacity onPress={takePicture} style={[styles.previewButtons, styles.circle,]}>
                <Icon name="icon-scan" style={styles.iconButtonsCamera} size={40}></Icon>
              </TouchableOpacity>
            </View>
          </LinearGradient>
        </View>
      </Camera>
    )}
  </View>
);

权限请求代码 #

const __startCamera = async () => {
    const { status } = await Camera.requestCameraPermissionsAsync();
    setHasPermission(status === 'granted');
}

排查与解决方案 #

1. 完善权限请求逻辑 #

确保权限请求在组件挂载后执行，且只有权限授予后才渲染Camera组件，避免提前渲染导致黑屏：

import { useEffect } from 'react';

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

// 渲染前添加权限判断
if (!hasPermission) {
  return <Text>请授予相机权限以继续</Text>;
}

2. 验证app.json权限配置完整性 #

expo-camera可能默认请求麦克风权限，即使未使用，需在infoPlist中补充配置，否则可能导致权限申请异常：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "需要相机权限来拍摄照片",
        "NSMicrophoneUsageDescription": "需要麦克风权限（可根据实际需求调整说明）"
      }
    }
  }
}

3. 检查eas build配置与缓存 #

• 确认eas.json中iOS构建配置未禁用相机权限，示例配置：

{
  "build": {
    "production": {
      "ios": {
        "entitlements": null,
        "buildConfiguration": "Release"
      }
    }
  }
}

• 清理构建缓存后重新构建，避免缓存导致的配置异常：

eas build --clean --platform ios

4. 确保Camera组件样式正确 #

Camera组件必须设置足够的尺寸，否则可能显示黑屏，调整样式确保占满容器：

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  camera: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
  // 其他样式...
});

5. 检查版本兼容性 #

expo-camera@12.2.0对应Expo SDK 45，若项目使用的SDK版本不匹配，可能导致独立版构建异常：

• 若使用SDK 45：保持当前expo-camera版本
• 若使用更高SDK（如46+）：升级expo-camera至对应兼容版本（如SDK 46对应expo-camera~13.2.0）

6. 确认真机权限状态 #

在TestFlight安装App后，前往设置 > 你的App名称，检查相机权限是否已开启，避免用户误操作忽略权限弹窗导致权限未授予。

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