react-native-text-recognition调用报错：无法读取null的recognize属性

问题重现 #

使用react-native-text-recognition包实现图片文本提取，控制台打印TextRecognition对象显示包含recognize方法，但调用该方法时抛出TypeError: Cannot read property 'recognize' of null错误。相关日志和代码如下：

日志信息 #

LOG  react native text recognition: {"recognize": [Function recognize]}
LOG  preprocessed image:  file:///Users/omarjandali/Library/Developer/CoreSimulator/Devices/AB8866C8-D53D-47DA-99F2-5CD700EF4EE1/data/Containers/Data/Application/BC734A7E-06AB-4D6E-A078-AAE568879878/Library/Caches/ExponentExperienceData/%2540anonymous%252FIOweYou-6d1646a9-9f6c-418d-9753-3ce4dce5140a/ImageManipulator/0474D866-A1EC-4387-9393-6335F6DA535A.jpg
LOG  call inside if:  {"recognize": [Function recognize]}
ERROR  Text recognition error: [TypeError: Cannot read property 'recognize' of null]

当前代码 #

const performOCR = () => {
    console.log('react native text recognition:', TextRecognition);
    console.log('preprocessed image: ', preprocessedImage);

    if (preprocessedImage && TextRecognition) {
      console.log('call inside if: ', TextRecognition);
      TextRecognition?.recognize(preprocessedImage)
        .then(result => {
          setOcrResult(result.text);
        })
        .catch(error => {
          console.error('Text recognition error:', error);
        });
    } else {
      console.log('text recognition is not initialized');
    }
  };

解决方案 #

1. 确认模块导入方式是否正确 #

检查react-native-text-recognition的导出类型，避免默认导入和命名导入混淆：

• 如果包是默认导出，使用：

  import TextRecognition from 'react-native-text-recognition';
  

• 如果包是命名导出，使用：

  import { TextRecognition } from 'react-native-text-recognition';
  

错误的导入方式可能导致打印时显示临时对象，但实际调用时引用丢失。

2. 适配Expo环境（如果使用Expo） #

从日志路径中的ExponentExperienceData可以看出这是Expo项目，react-native-text-recognition作为原生模块无法在Expo Go中直接运行，可选择两种方案：

• 执行npx expo prebuild生成原生代码，然后用原生模拟器/真机运行；
• 替换为Expo官方适配的expo-vision包，安装和使用示例：

  npx expo install expo-vision
  

  import * as Vision from 'expo-vision';
  
  const performOCR = async () => {
    if (!preprocessedImage) return;
    try {
      const result = await Vision.recognizeTextAsync(preprocessedImage);
      setOcrResult(result.text);
    } catch (error) {
      console.error('Text recognition error:', error);
    }
  };
  

3. 避免变量引用丢失 #

组件重新渲染时可能导致TextRecognition变量被重置，用useRef保存引用：

import { useRef } from 'react';
import TextRecognition from 'react-native-text-recognition';

const YourComponent = () => {
  const textRecognitionRef = useRef(TextRecognition);
  
  const performOCR = () => {
    if (preprocessedImage && textRecognitionRef.current) {
      textRecognitionRef.current.recognize(preprocessedImage)
        .then(result => setOcrResult(result.text))
        .catch(error => console.error('Text recognition error:', error));
    }
  };

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

4. 重新安装包并检查兼容性 #

卸载并重装包，确保版本与当前React Native兼容：

npm uninstall react-native-text-recognition
npm install react-native-text-recognition
# iOS环境需执行pod安装
cd ios && pod install && cd ..

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