React Native无法加载TensorFlow模型.bin权重文件问题求助

1. 修正模型加载逻辑（核心问题） #

不能用require()直接加载.bin权重文件，TensorFlow.js在React Native中加载本地模型时，仅需传入模型JSON的资源引用，权重文件会自动根据JSON内的路径配置查找（前提是Metro正确识别.bin为资源文件）。

修改loadModel函数：

const loadModel = async () => {
  await tf.ready();
  // 仅需加载模型JSON，权重文件会自动匹配加载
  const modelJson = require('./assets/model/model.json');
  const loadedModel = await tf.loadGraphModel(tf.io.bundleResource(modelJson));
  setModel(loadedModel);
  console.log('Model Loaded!');
};

2. 修正Metro配置（确保资源扩展名被识别） #

检查metro.config.js，确保.bin被加入资源扩展名列表，可补充.json显式声明（避免默认规则冲突）：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const blacklist = require('metro-config/src/defaults/blacklist');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    assetExts: [...getDefaultConfig(__dirname).resolver.assetExts, 'bin', 'json'],
    sourceExts: ['js', 'json', 'ts', 'tsx', 'jsx'],
    blacklistRE: blacklist([/platform_node/])
  },
});

3. 修复build.gradle配置 #

当前extraPackagerArgs格式存在重复参数，改为正确的数组格式：

project.ext.react = [
  extraPackagerArgs: ["--assetExts", "bin,json"]
]

4. 修复图片预处理函数（React Native无DOM API） #

React Native环境不存在document和canvas对象，需用@tensorflow/tfjs-react-native提供的工具函数处理图片：

1. 先安装依赖：

npm install @tensorflow/tfjs-react-native react-native-fs

2. 修改预处理函数：

import { decodeJpeg } from '@tensorflow/tfjs-react-native';
import * as RNFS from 'react-native-fs';

const preprocessImage = async (uri: string) => {
  // 读取图片为二进制数据
  const imgBase64 = await RNFS.readFile(uri, 'base64');
  const imgUint8Array = Uint8Array.from(atob(imgBase64), c => c.charCodeAt(0));
  
  // 解码为Tensor并预处理
  const imageTensor = decodeJpeg(imgUint8Array);
  const resizedTensor = tf.image.resizeBilinear(imageTensor, [200, 200]);
  const normalizedImage = resizedTensor.toFloat().div(255);
  const expandedImage = normalizedImage.expandDims(0);
  
  // 清理中间张量避免内存泄漏
  imageTensor.dispose();
  resizedTensor.dispose();
  
  return expandedImage;
};

5. 额外检查项 #

• 确认assets/model目录下model.json和shard.bin存在，且文件名大小写完全匹配（Linux系统严格区分大小写）。
• 重启Metro服务器并清除缓存：执行npx react-native start --reset-cache，避免旧配置残留。
• 检查model.json内的weightsManifest字段，确保paths值为["shard.bin"]，与实际权重文件名一致。

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