React Native：Vision Camera拍摄的临时图片无法显示求助

你的代码存在几个关键问题，导致图片无法正常显示：

1. 图片尺寸设置过小 #

Image组件的maxWidth: 10和maxHeight: 20尺寸极小，几乎会让图片缩至不可见，这是最直观的显示问题。

2. 文件路径拼接错误 #

react-native-vision-camera的takePhoto返回的photo.path本身已是完整的file://开头的文件URI，无需手动拼接DocumentDirectoryPath，多余的拼接会导致URI无效，图片加载失败。

3. 状态更新的潜在隐患 #

使用setPhotos([...photos, photo])依赖当前渲染周期的photos值，异步操作后可能拿到旧状态，建议改用函数式更新确保获取最新状态：

setPhotos(prevPhotos => [...prevPhotos, photo]);

修正后的代码示例 #

// 拍照并更新照片列表
const onPressButton = async () => {
  const photo = await cameraRef.current.takePhoto({
    flash: 'off',
    qualityPrioritization: 'speed',
  });
  // 函数式更新状态，确保拿到最新的photos数组
  setPhotos(prev => [...prev, photo]);
  setShowCamera(false);
};

// 渲染照片列表
{photos && photos.length > 0 && (
  <View style={{width: '50%', height: '50%', flexDirection: 'row', flexWrap: 'wrap'}}>
    {photos.map((photo, index) => (
      <View key={index} style={{width: 100, height: 100, margin: 5}}>
        {/* 直接使用photo.path作为图片URI */}
        <Image 
          style={{width: '100%', height: '100%'}} 
          source={{uri: photo.path}} 
          resizeMode="cover"
        />
      </View>
    ))}
  </View>
)}

额外排查点 #

• 确认已申请相机和存储权限：iOS需在Info.plist添加NSCameraUsageDescription；Android需在AndroidManifest.xml添加CAMERA和READ_EXTERNAL_STORAGE权限。
• 打印photo.path确认路径有效性，可通过文件管理器查看对应路径是否存在图片文件。

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