React Native中如何将base64格式的图片转换为uri？

方案1：直接构造Data URI（无缓存清理风险，适合绝大多数场景） #

该方案完全不需要依赖本地存储，生成的URI本质是把图片内容直接编码在字符串中，不存在被系统缓存机制删除的可能。

• 标准Data URI格式为 data:[<mediatype>][;base64],<data>，生成后可直接传入Image组件的source属性，也适配绝大多数支持URI参数的第三方组件。
• 示例代码：

// base64Data为不带前缀的纯base64图片内容
const imageUri = `data:image/png;base64,${base64Data}`;

// 组件调用示例
<Image source={{uri: imageUri}} style={{width: 100, height: 100}} />

• 优势：无额外依赖、实现成本为0，完全规避缓存清理风险。
• 注意：如果拿到的base64内容已经自带data:前缀，直接作为URI使用即可，不需要重复拼接。

方案2：持久化写入本地文件（适合大体积图片、长期复用场景） #

如果需要处理1M以上的大体积图片，或者需要长期复用图片不想每次携带长base64字符串，可以把base64写入系统不会主动清理的沙盒持久化目录，生成永久可用的file URI。

• 推荐使用业内通用文件操作库react-native-fs实现，写入目录选择DocumentDirectory即可，该目录只有用户主动卸载应用、或者手动调用删除接口才会清空，不会被系统缓存机制清理。
• 示例代码：

import RNFS from 'react-native-fs';

// base64Data为待存储的base64内容，fileName可自定义
const saveBase64ToPersistentUri = async (base64Data, fileName = 'custom_img.png') => {
  // 拼接持久化存储路径
  const savePath = `${RNFS.DocumentDirectoryPath}/${fileName}`;
  // 去掉base64可能带的前缀，只保留纯内容
  const pureBase64 = base64Data.replace(/^data:image\/\w+;base64,/, '');
  // 写入文件
  await RNFS.writeFile(savePath, pureBase64, 'base64');
  // 返回可直接使用的file URI
  return `file://${savePath}`;
}

// 调用示例
const persistentImageUri = await saveBase64ToPersistentUri(yourBase64Str);

• 优势：大图片加载性能比Data URI更高，URI永久有效，适合需要长期存储的业务场景。
• 注意：不需要的图片要主动清理，避免占用用户设备存储空间。

避坑提示 #

• 不要把文件写入CacheDirectory目录，该目录为系统缓存目录，存储空间不足时系统会自动清理该目录下的文件，就是你遇到的临时URI被删除的常见原因。
• 体积超过1M的图片不建议用Data URI，过长的字符串在低端设备上可能出现加载卡顿问题，优先选持久化文件方案。

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