在Expo React Native中将Base64字符串转换为可查看图片的方法

嘿，这个场景我太熟了！用Base64存图片后再转回可显示的格式，在Expo React Native里其实有几种很顺手的方案，我给你拆解清楚：

方法一：直接用React Native/Expo Image组件加载 #

这是最简单的方式，因为React Native的Image组件和Expo推荐的expo-image组件都支持直接解析data URI格式的Base64字符串。

你只需要给服务器返回的纯Base64字符串加上对应的前缀就行，格式是：data:image/[图片格式];base64,[你的Base64字符串]。

举个代码例子：

// 如果你用原生React Native Image
import { Image } from 'react-native';

// 假设从服务器拿到的纯Base64数据
const base64FromServer = "iVBORw0KGgoAAAANSUhEUgAAADIA...";

// 拼接完整的data URI，注意替换成实际图片格式（png/jpeg/webp等）
const imageUri = `data:image/png;base64,${base64FromServer}`;

// 在组件里直接使用
export default function ImageViewer() {
  return (
    <Image
      source={{ uri: imageUri }}
      style={{ width: 200, height: 200, borderRadius: 8 }}
      resizeMode="cover"
    />
  );
}

如果你用Expo官方推荐的expo-image组件（性能更好），用法几乎一致：

import { Image } from 'expo-image';

// 同样拼接data URI
const imageUri = `data:image/jpeg;base64,${base64FromServer}`;

<Image
  source={imageUri}
  style={{ width: 200, height: 200 }}
  contentFit="cover"
/>

方法二：将Base64保存为本地文件后加载 #

如果你的Base64数据很大，或者需要离线访问图片，更推荐把Base64转成本地文件，再用本地URI加载。这里可以用Expo自带的FileSystem模块来实现：

import { Image, Text, View } from 'react-native';
import * as FileSystem from 'expo-file-system';
import { useState, useEffect } from 'react';

// 封装一个转存函数
const saveBase64ToLocal = async (base64Str, imageFormat = 'png') => {
  // 定义本地文件路径，存在Expo的文档目录里
  const localFilePath = `${FileSystem.documentDirectory}saved-image.${imageFormat}`;
  
  try {
    // 将Base64写入本地文件，指定编码为Base64
    await FileSystem.writeAsStringAsync(
      localFilePath,
      base64Str,
      { encoding: FileSystem.EncodingType.Base64 }
    );
    return localFilePath;
  } catch (error) {
    console.error('保存图片失败:', error);
    return null;
  }
};

// 组件中使用
export default function LocalImageViewer() {
  const [localImageUri, setLocalImageUri] = useState(null);

  useEffect(() => {
    const fetchAndConvert = async () => {
      // 模拟从服务器获取Base64
      const base64Data = "iVBORw0KGgoAAAANSUhEUgAAADIA...";
      const uri = await saveBase64ToLocal(base64Data, 'jpeg');
      setLocalImageUri(uri);
    };

    fetchAndConvert();
  }, []);

  return (
    <View>
      {localImageUri ? (
        <Image
          source={{ uri: localImageUri }}
          style={{ width: 200, height: 200 }}
        />
      ) : (
        <Text>图片加载中...</Text>
      )}
    </View>
  );
}

几个要注意的小细节 #

• 图片格式匹配：一定要确认服务器存储的图片格式，前缀里的image/png要对应实际格式（比如jpg用image/jpeg），否则图片会显示不出来。
• 清理无效字符：如果服务器返回的Base64字符串带有多余的空格、换行符，记得先调用base64FromServer.trim()处理一下。
• 性能考量：超大的Base64字符串直接用data URI加载可能会导致内存占用过高，这时候优先用方法二转成本地文件。

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