在Expo/React Native中将本地图片转换为base64字符串的实现方法

React Native 运行环境不包含 Node.js 原生的 fs 模块，你可以按照以下步骤实现需求：

• 第一步：安装依赖
  优先使用 Expo 官方提供的能力库，Expo Go 环境可直接调用，裸项目先执行安装：
  npx expo install expo-asset expo-file-system
• 第二步：配置静态资源打包规则
  修改项目根目录的 app.json，确保目标资源路径被加入打包白名单：

  {
    "expo": {
      "assetBundlePatterns": [
        "assets/**/*"
      ]
    }
  }
  

• 第三步：实现转换逻辑
  静态资源加载是异步操作，不能用同步方法实现：

  import * as Asset from 'expo-asset';
  import * as FileSystem from 'expo-file-system';
  
  async function loadSheet() {
    // 加载静态资源，必须使用 require 引入资源，不能直接传入路径字符串
    const asset = Asset.fromModule(require('./assets/sprites.png'));
    await asset.downloadAsync();
    // 读取资源文件并转换为base64格式
    const base64Str = await FileSystem.readAsStringAsync(asset.localUri, {
      encoding: FileSystem.EncodingType.Base64
    });
    return `data:image/png;base64,${base64Str}`;
  }
  

• 调用说明
  该函数为异步函数，调用时需要配合 await 或者 .then() 处理返回结果：

  // 示例调用
  async function getSpriteBase64() {
    const base64 = await loadSheet();
    // 后续业务逻辑
  }
  

• 非Expo裸项目可选方案
  如果你使用的是没有接入Expo的纯React Native裸项目，可以引入第三方库 react-native-fs，安装配置完成后调用其 readFile 方法，指定编码格式为base64即可实现相同效果。

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