Expo React Native中TakeSnapshotAsync返回黑屏问题求助

嘿，作为React Native新手碰到这种拍出来是黑屏的情况太闹心了！我帮你分析几个最可能的原因，再给你调整后的代码参考～

常见问题排查与解决办法 #

1. 没正确绑定Camera的Ref #

TakeSnapshotAsync必须拿到Camera组件的真实实例才能正确拍照，如果你的ref没设置对，就会拍到黑屏。一定要用useRef()来创建并绑定到Camera组件上：

import { useRef, useState } from 'react';
import { Camera } from 'expo-camera';

export default function CameraScreen() {
  const cameraRef = useRef(null); // 正确创建Camera的ref
  const [hasPermission, setHasPermission] = useState(null);

  // ...权限申请逻辑
}

然后在Camera组件上绑定ref：

<Camera 
  ref={cameraRef} 
  style={{ flex: 1 }} 
  type={Camera.Constants.Type.back}
/>

2. 没等待相机完全就绪就拍照 #

相机启动需要一点时间，如果在相机还没初始化完成时就点击快照，也可能拍出黑屏。可以用Camera的onCameraReady事件标记相机就绪：

const [isCameraReady, setIsCameraReady] = useState(false);

// ...

<Camera 
  ref={cameraRef} 
  style={{ flex: 1 }} 
  type={Camera.Constants.Type.back}
  onCameraReady={() => setIsCameraReady(true)} // 相机就绪后更新状态
/>

然后在快照按钮里判断：

<TouchableOpacity 
  onPress={takePicture}
  disabled={!isCameraReady} // 没就绪就禁用按钮
>
  {/* 快照按钮内容 */}
</TouchableOpacity>

3. TakeSnapshotAsync的参数配置不对 #

默认的参数可能不适合直接存到CameraRoll，建议明确指定result: 'uri'，并设置合适的quality：

const takePicture = async () => {
  if (cameraRef.current && isCameraReady) {
    try {
      // 正确调用TakeSnapshotAsync
      const photo = await cameraRef.current.takePictureAsync({
        quality: 0.8,
        result: 'uri', // 生成可直接保存的uri
      });
      // 保存到CameraRoll
      await CameraRoll.saveAsync(photo.uri);
      alert('照片已保存！');
    } catch (error) {
      console.error('拍照或保存出错:', error);
    }
  }
};

4. 权限不全 #

虽然相机能显示，但保存到相册需要额外的媒体库写入权限。确保你已经申请了MEDIA_LIBRARY_WRITE权限：

import * as Permissions from 'expo-permissions';

const getPermissions = async () => {
  const { status: cameraStatus } = await Camera.requestPermissionsAsync();
  const { status: mediaStatus } = await Permissions.askAsync(Permissions.MEDIA_LIBRARY_WRITE);
  setHasPermission(cameraStatus === 'granted' && mediaStatus === 'granted');
};

完整代码示例 #

整合以上修改后的完整CameraScreen参考：

import React, { useRef, useState, useEffect } from 'react';
import { View, TouchableOpacity, Text, Alert } from 'react-native';
import { Camera } from 'expo-camera';
import * as Permissions from 'expo-permissions';
import * as CameraRoll from 'expo-camera-roll';

export default function CameraScreen() {
  const cameraRef = useRef(null);
  const [hasPermission, setHasPermission] = useState(null);
  const [isCameraReady, setIsCameraReady] = useState(false);

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

  const getPermissions = async () => {
    const cameraPerm = await Camera.requestPermissionsAsync();
    const mediaPerm = await Permissions.askAsync(Permissions.MEDIA_LIBRARY_WRITE);
    setHasPermission(cameraPerm.status === 'granted' && mediaPerm.status === 'granted');
  };

  const takePicture = async () => {
    if (!cameraRef.current || !isCameraReady) return;

    try {
      const photo = await cameraRef.current.takePictureAsync({
        quality: 0.8,
        result: 'uri',
      });
      await CameraRoll.saveAsync(photo.uri);
      Alert.alert('成功', '照片已保存到相册！');
    } catch (err) {
      console.error('拍照失败:', err);
      Alert.alert('错误', '拍照或保存时出现问题，请重试');
    }
  };

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>没有相机或相册权限</Text>;
  }

  return (
    <View style={{ flex: 1 }}>
      <Camera
        ref={cameraRef}
        style={{ flex: 1 }}
        type={Camera.Constants.Type.back}
        onCameraReady={() => setIsCameraReady(true)}
      />
      <View style={{ position: 'absolute', bottom: 30, alignSelf: 'center' }}>
        <TouchableOpacity
          onPress={takePicture}
          disabled={!isCameraReady}
          style={{
            width: 70,
            height: 70,
            borderRadius: 35,
            backgroundColor: isCameraReady ? '#fff' : '#aaa',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text style={{ fontSize: 18 }}>📸</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

试试上面的调整，应该就能解决黑屏问题啦～

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