如何在Expo React Native应用中打包自定义资产避免网络加载？

核心需求 #

将/assets/mlmodels/ggml-base.en.bin这类机器学习模型文件直接打包进应用包，确保开发、生产环境均从本地文件系统加载，避免首次访问时从Expo开发服务器网络获取的延迟。

关键修正与配置步骤 #

你已完成基础配置，需调整以下关键点确保资产被正确本地打包：

1. 统一资产扩展名配置 #

确保metro.config.js与app.json中的扩展名一致（注意若mil是笔误，建议修正为对应模型文件的正确扩展名，比如ml）：

metro.config.js

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// 去重并添加自定义资产扩展名
config.resolver.assetExts = [...new Set([...config.resolver.assetExts, 'bin', 'ml', 'txt'])];

module.exports = config;

app.json

{
  "expo": {
    "name": "Foo",
    "slug": "Bar",
    "version": "1.0.0",
    // ...其他配置项
    "assetBundlePatterns": [
      "assets/mlmodels/**/*" // 精准匹配模型目录，比全局匹配更高效
    ],
    "packagerOpts": {
      "assetExts": ["bin", "ml", "txt"]
    }
  }
}

2. 用expo-asset获取本地路径 #

静态require仅能引入资产，需借助expo-asset工具确保资产被正确链接并获取本地URI：

import { Asset } from 'expo-asset';

async function loadLocalModel() {
  // 加载目标资产
  const modelAsset = Asset.fromModule(require('./assets/mlmodels/ggml-base.en.bin'));
  await modelAsset.downloadAsync(); // 开发构建中此步骤直接调用本地资产，不走网络
  
  // 获取本地文件路径用于模型加载
  const localModelPath = modelAsset.localUri;
}

3. 开发构建验证 #

使用EAS构建自定义开发客户端后，通过以下方式验证：

• 查看构建日志，确认ggml-base.en.bin被纳入打包列表
• 断开网络运行开发客户端，若模型能正常加载，说明资产已本地打包
• 解压APK/IPA包，检查assets/mlmodels/目录下是否存在目标.bin文件

4. 生产构建注意事项 #

生产构建时Expo会自动打包assetBundlePatterns中的资产，需注意：

• 必须使用静态require引入资产，Metro无法识别动态路径的资产
• 构建前清理缓存：执行npx expo prebuild --clean和npx expo start --clear，避免缓存导致的打包异常

常见排查点 #

• 检查扩展名拼写：确保所有配置中的扩展名与文件实际后缀一致
• 确认资产路径：require中的相对路径需与文件实际位置匹配
• 查看Metro日志：启动项目时观察日志，确认目标.bin文件被正常打包

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