Expo 52 React Native加载本地.bin文件时遇‘Unable to resolve’错误

问题回顾 #

在Expo 52项目中尝试加载本地.bin格式的TensorFlow权重文件，文件已放入项目根目录的assets文件夹，使用以下代码加载时出现路径解析错误：

const modelWeights1 = await require('../../assets/group1-shard1of2.bin');

错误信息：

Android Bundling failed 10951ms node_modules/expo-router/entry.js (1247 modules)
Unable to resolve "../..assets/group1-shard1of2.bin" from "app/(tabs)/poseview.tsx"

已尝试添加metro.config.js将bin加入资源扩展名列表，但问题未解决。

针对性修复步骤 #

1. 修正Metro配置（适配Expo 52） #

Expo 52使用Metro v0.80+，需使用@expo/metro-config而非原生metro-config继承Expo默认配置，替换原metro.config.js内容：

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

const config = getDefaultConfig(__dirname);
// 将bin格式加入可解析的资源扩展名
config.resolver.assetExts.push('bin');

module.exports = config;

2. 确认assets目录在app.json中注册 #

确保项目根目录的app.json中显式声明assets目录，避免Metro扫描遗漏：

{
  "expo": {
    "assets": ["./assets/"]
  }
}

3. 使用Expo兼容的方式加载二进制资源 #

不能直接用require加载二进制文件内容，需先获取资源URI，再通过fetch读取：

// 1. 获取asset的URI（require返回的是asset对象，包含uri字段）
const weightsAsset = require('../../assets/group1-shard1of2.bin');
// 2. 用fetch加载二进制内容
const response = await fetch(weightsAsset.uri);
const weightsBuffer = await response.arrayBuffer();
// 3. 将buffer传入TensorFlow的加载方法（示例：加载Layers模型）
const model = await tf.loadLayersModel(
  tf.io.browserFiles([
    await fetch(require('../../assets/model.json').uri).then(res => res.json()),
    new Blob([weightsBuffer])
  ])
);

4. 重启Metro Bundler #

修改Metro配置后必须完全关闭并重启bundler，否则新配置不会生效：

# 关闭当前bundler，然后重新启动
npx expo start --clear

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