使用captureRef时Expo Go无日志直接崩溃问题排查

可能的崩溃原因 #

• 视图未完全渲染：Image组件加载是异步的，如果在图片还没加载完成时调用captureRef，会导致捕获操作访问未就绪的视图资源，引发崩溃。
• ref初始化错误：如果savedPicture没有通过useRef(null)正确初始化，ref引用无效，调用captureRef时会触发底层错误。
• 内存占用过高：若原图尺寸过大，captureRef捕获时需要处理大量像素数据，超出设备内存限制直接导致崩溃。
• 视图样式异常：容器或子视图的宽高设置为0、或者样式布局存在异常（比如叠加层层级冲突），导致视图渲染异常，捕获时触发崩溃。
• Expo SDK版本bug：部分旧版本Expo SDK的captureRef存在兼容性问题，在特定设备或场景下会无日志崩溃。

对应解决方案 #

1. 等待图片加载完成：给Image添加onLoadEnd事件，设置状态标记图片加载完成，仅在加载完成后允许执行保存操作：

const [isImageLoaded, setIsImageLoaded] = useState(false);

const savePicture = async () => {
  if (!isImageLoaded) return;
  const result = await captureRef(savedPicture, {
    result: 'tmpfile',
    quality: 0.8, // 降低质量减少内存占用
  })
}

// Image组件添加加载完成事件
<Image 
  source={{ uri: photoData.uri }} 
  style={styles.camera}
  onLoadEnd={() => setIsImageLoaded(true)}
/>

2. 确认ref正确初始化：确保ref是通过useRef创建的：

import { useRef } from 'react';

const savedPicture = useRef(null);

3. 优化图片与捕获配置：

   • 对原图进行压缩后再渲染，避免超大尺寸图片；
   • 在captureRef配置中添加quality参数（取值0-1），降低输出图片的质量和内存占用。

4. 检查视图样式：确保容器和子视图有明确的宽高设置，比如：

const styles = StyleSheet.create({
  container: {
    width: 300,
    height: 400,
    position: 'relative',
  },
  camera: {
    width: '100%',
    height: '100%',
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  // ...其他样式
});

5. 更新Expo SDK版本：将Expo SDK升级到最新稳定版，或回退到已知无该bug的版本（可查看Expo官方问题追踪确认修复版本）。

6. 最小化测试排查：创建一个极简的测试组件，仅包含Image、叠加层和captureRef调用，验证是否崩溃，逐步添加原有代码定位问题点。

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