React Native中无法使用Web端函数的问题排查

为什么会出现这些错误？ #

1. ReferenceError: Can't find variable: Image #

React Native 并非浏览器环境，不存在 DOM API。Web 端的 Image 构造函数属于浏览器专属的 DOM 接口，因此在 RN 中直接调用 new Image() 会触发找不到变量的错误。

2. TypeError: undefined is not a constructor (evaluating 'new _canvas.Image()') #

node-canvas 是为 Node.js 环境设计的画布库，而 React Native 是移动端原生运行环境，不兼容 Node.js 的模块体系。导入后无法正常初始化 Image 构造函数，导致构造函数为 undefined，调用 new 时触发错误。

正确的解决方案：使用 TensorFlow.js 的 React Native 适配版本 #

在 Expo + React Native 中，应使用官方适配的 @tensorflow/tfjs-react-native，而非直接用 Web 端的 tf.browser.fromPixels 结合 Web API。

步骤 1：安装依赖 #

expo install @tensorflow/tfjs-react-native expo-gl expo-image-utils

• @tensorflow/tfjs-react-native：TF.js 的 RN 适配核心库
• expo-gl：提供 GPU 加速环境，TF.js 依赖它运行
• expo-image-utils：方便将 RN 图片转换为 TF.js 可处理的格式

步骤 2：初始化 TensorFlow.js #

在应用启动时初始化 TF.js 原生绑定：

import * as tf from '@tensorflow/tfjs-react-native';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const initTensorFlow = async () => {
      await tf.ready(); // 等待 TF.js 加载完成
      console.log('TensorFlow.js 初始化完成');
    };
    initTensorFlow();
  }, []);

  // 其他组件逻辑...
}

步骤 3：处理 Expo Camera 拍摄的图片 #

以下两种方法均可将拍摄的图片转换为 TF.js 张量：

方法一：通过 ImageData 转换

利用 expo-image-utils 获取兼容的 ImageData，再传给 tf.browser.fromPixels：

import { Camera } from 'expo-camera';
import * as ImageUtils from 'expo-image-utils';
import * as tf from '@tensorflow/tfjs-react-native';
import { useRef } from 'react';

const cameraRef = useRef<Camera>(null);

const handleTakePicture = async () => {
  if (!cameraRef.current) return;

  // 拍摄图片，获取 uri
  const photo = await cameraRef.current.takePictureAsync({ 
    quality: 0.8, 
    base64: true 
  });

  // 将图片转换为 ImageData
  const imageData = await ImageUtils.getImageDataAsync(photo.uri);
  
  // 转换为 TF.js 张量
  const tensor = tf.browser.fromPixels(imageData);

  // 后续模型推理等操作...
  
  // 释放张量内存，避免泄漏
  tensor.dispose();
};

方法二：直接解码 JPEG 二进制数据

通过 fetch 获取图片二进制数据，用 TF.js 内置方法解码为张量：

const handleTakePicture = async () => {
  if (!cameraRef.current) return;

  const photo = await cameraRef.current.takePictureAsync({ quality: 0.8 });

  // 获取图片二进制数据
  const response = await fetch(photo.uri);
  const blob = await response.blob();
  const arrayBuffer = await blob.arrayBuffer();
  const uint8Array = new Uint8Array(arrayBuffer);

  // 解码 JPEG 为张量
  const tensor = tf.image.decodeJpeg(uint8Array);

  // 后续操作...
  
  tensor.dispose();
};

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