React Native Skia Base64图片在Android不显示但iOS正常问题排查

问题现象 #

• 使用React Native Skia的useImage加载Base64格式图片时，iOS设备能正常显示，Android设备无法显示图片。
• 排查确认：Android端调用useImage(base64)会返回null，这是导致图片不显示的直接原因。

代码示例 #

// 排查发现Android端useImage返回null，导致图片无法显示
const image = useImage(base64); // Android端此处返回null

问题截图 #

解决方法 #

方法1：将Base64转换为本地文件后加载 #

借助文件操作库（如react-native-fs）把Base64字符串写入本地临时文件，再通过文件路径调用useImage：

import RNFS from 'react-native-fs';
import { useImage } from '@shopify/react-native-skia';
import { useState, useEffect } from 'react';

// 转换Base64为本地文件路径
const convertBase64ToLocalFile = async (base64Str) => {
  const tempPath = `${RNFS.CachesDirectoryPath}/temp_skia_image.png`;
  // 移除Base64前缀（如果包含的话）
  const pureBase64 = base64Str.replace(/^data:image\/(png|jpg|jpeg);base64,/, '');
  await RNFS.writeFile(tempPath, pureBase64, 'base64');
  return tempPath;
};

// 组件内使用
const YourComponent = ({ base64Image }) => {
  const [localImagePath, setLocalImagePath] = useState(null);

  useEffect(() => {
    if (base64Image) {
      convertBase64ToLocalFile(base64Image).then(setLocalImagePath);
    }
  }, [base64Image]);

  const image = useImage(localImagePath);

  // 后续渲染逻辑
  return (
    // ...
  );
};

方法2：升级React Native Skia版本 #

该Base64加载问题在React Native Skia后续版本中已被修复，可尝试升级到最新稳定版本，直接使用useImage(base64)即可正常加载。

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