React Native+Expo-Camera Android端Base64存储图片损坏问题排查

可能的成因 #

1. useEffect语法错误引发重复相机初始化

你的第二个useEffect存在语法错误，闭合括号位置错误：

// 错误写法
useEffect(() => {
    __startCamera(props.startCamera);
}), [startCamera, props.startCamera];

这个错误会导致依赖数组失效，组件每次渲染都会触发__startCamera，频繁的相机权限请求和状态切换会干扰拍照后的图片处理流程，在Android上容易引发文件状态异常。

2. manipulateAsync的compress: 0参数兼容性问题

Expo的manipulateAsync中，compress: 0理论代表不压缩，但Android平台对该参数的处理存在差异——部分设备会将0解析为无效值，导致图片编码失败或生成损坏的文件。而iOS对该参数的容错性更强，因此未出现问题。

3. Android临时文件生命周期导致URI失效

Android上，takePictureAsync和manipulateAsync返回的URI指向临时缓存文件，系统会在应用后台或内存紧张时自动清理这些文件。当你后续通过photo.uri加载图片时，原文件已被删除，导致图片显示损坏。iOS的临时文件留存策略更宽松，所以未触发该问题。

4. 重复状态更新引发的竞态问题

__takePicture中先调用setPhoto(photo)，随后又调用setPhoto(manipResult)，两次状态更新在Android上可能引发竞态：组件可能在manipulateAsync完成前就尝试渲染第一张临时图片，当最终结果返回时，之前的临时文件已被清理，导致显示的图片损坏。

修复建议 #

• 修正useEffect语法：

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

  确保依赖数组正常工作，避免不必要的相机初始化。

• 调整compress参数：
  将compress: 0改为compress: 1（无损压缩），保证Android端能正确处理图片编码：

  const manipResult = await manipulateAsync(photo.uri, [], {
      compress: 1,
      format: SaveFormat.JPEG,
      base64: true,
  });
  

• 直接使用Base64展示图片：
  既然最终要将Base64保存到SQLite，展示时直接使用Base64 URI，避免依赖临时文件路径：

  <Image
      source={{ uri: `data:image/jpeg;base64,${photo.base64}` }}
      resizeMode="cover"
      style={{
          width: "80%",
          height: "80%",
          backgroundColor: "black",
          borderWidth: 5,
          borderRadius: 10,
      }}
  />
  

• 移除冗余状态更新：
  直接等待manipulateAsync完成后再更新状态，避免竞态：

  const __takePicture = async () => {
      if (!camera) return;
      const photo = await camera.takePictureAsync({ base64: true });
  
      const manipResult = await manipulateAsync(photo.uri, [], {
          compress: 1,
          format: SaveFormat.JPEG,
          base64: true,
      });
  
      setPhoto(manipResult);
  };
  

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