Expo环境下实现占位图显示并将其URL转换为Base64的方法

先明确：显示占位图不需要转Base64 #

React Native的Image组件支持直接传入网络URL作为source，完全没必要先转Base64，这是最直接的方案。你的代码可以改成这样：

<View style={styles.container_image}>
  {/* 默认显示占位图，接口返回真实图片后替换 */}
  <Image 
    source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png' }} 
    style={{ width: 200, height: 200 }} 
  />
  {/* 拿到真实图片后显示 */}
  {this.state.image && (
    <Image 
      source={{ uri: this.state.image }} 
      style={{ width: 200, height: 200 }} 
    />
  )}
</View>

如果需要占位图和真实图片切换，用状态控制即可——默认显示占位图，获取到真实图片后更新状态替换。

如果你确实需要把URL转成Base64（Expo环境） #

Expo自带的expo-file-system就能实现，不用第三方库（RNFetchBlob确实不支持Expo）。具体步骤如下：

1. 安装依赖 #

npx expo install expo-file-system

2. 编写转换函数 #

在组件中添加一个异步函数，用来将图片URL转换为Base64格式：

import * as FileSystem from 'expo-file-system';

// 转换图片URL到Base64
const convertImageToBase64 = async (imageUrl) => {
  try {
    // 读取远程图片并转为Base64编码
    const base64String = await FileSystem.readAsStringAsync(imageUrl, {
      encoding: FileSystem.EncodingType.Base64,
    });
    // 返回完整的Base64图片格式（需加上前缀才能被Image识别）
    return `data:image/png;base64,${base64String}`;
  } catch (error) {
    console.error('Base64转换失败:', error);
    // 转换失败时返回原URL作为降级方案
    return imageUrl;
  }
};

3. 在组件中使用 #

可以在组件挂载时预转换占位图，或者按需调用：

class YourComponent extends React.Component {
  state = {
    placeholderBase64: '',
    image: null,
  };

  async componentDidMount() {
    const placeholderUrl = 'https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png';
    const base64 = await convertImageToBase64(placeholderUrl);
    this.setState({ placeholderBase64: base64 });
  }

  render() {
    return (
      <View style={styles.container_image}>
        {/* 显示转换后的Base64占位图，或原URL作为降级 */}
        <Image 
          source={{ uri: this.state.placeholderBase64 || 'https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png' }} 
          style={{ width: 200, height: 200 }} 
        />
        {/* 真实图片加载完成后显示 */}
        {this.state.image && (
          <Image 
            source={{ uri: this.state.image }} 
            style={{ width: 200, height: 200 }} 
          />
        )}
      </View>
    );
  }
}

有没有React Native库可以直接实现？ #

专门做“占位图显示+URL转Base64”的库没必要，Expo自带的API已经足够解决问题，第三方库反而可能增加打包体积或兼容性风险。如果是纯React Native（非Expo）环境，可以用react-native-fs，但Expo环境下优先用官方的expo-file-system。

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