Expo React Native打包APK后react-native-canvas本地图片不显示求助

问题分析 #

1. 路径适配问题：开发环境中Asset.fromModule返回的是本地开发服务器路径，但打包APK后资源会被嵌入应用内部，原URI无法被react-native-canvas正确识别。
2. 变量名错误：代码里drawImage(image, ...)的image未定义，实际图片变量是img，这会直接导致绘制失败。

解决方案 #

1. 预加载资源并获取打包后有效路径 #

使用expo-asset的loadAsync确保资源加载完成，打包后优先使用localUri（资源本地存储路径）而非开发环境的临时URI。

2. 修复变量名错误 #

将drawImage的参数替换为定义好的img变量。

修改后的代码示例 #

import { Asset } from 'expo-asset';

// 建议在异步函数中处理资源加载与绘制
const drawLocalImage = async (canvas) => {
  const context = canvas.getContext('2d');
  // 初始化资源并预加载
  const asset = Asset.fromModule(require('../assets/images/gameIcons/game.png'));
  await asset.downloadAsync();

  let img = new CanvasImage(canvas);
  // 打包后使用localUri确保路径有效
  img.src = asset.localUri || asset.uri;

  img.addEventListener('load', function() {
    // 修复变量名错误，使用正确的img变量
    context.drawImage(img, 0, 0, 100, 100);
  });
};

// 在canvas组件挂载完成后调用该函数，例如在useEffect中
// useEffect(() => {
//   if (canvasRef.current) {
//     drawLocalImage(canvasRef.current);
//   }
// }, []);

额外检查项 #

• 确保app.json中已配置资源目录，避免打包时资源被遗漏：

  "assets": [
    "./assets/images/gameIcons/"
  ]
  

• 确认react-native-canvas版本与当前Expo SDK版本兼容，避免因版本不匹配导致的异常。

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