React Native集成@react-native-ml-kit/text-recognition链接错误求助

问题 #

我有一个React Native项目，想实现用户拍照/从相册选图后提取图片文本并展示的功能。试了4个npm包都没成功，现在用的是@react-native-ml-kit/text-recognition，安装导入后调用时一直报错：

ERROR  Error: The package '@react-native-ml-kit/text-recognition' doesn't seem to be linked. Make sure: 

- You have run 'pod install'
- You rebuilt the app after installing the package
- You are not using Expo managed workflow
, js engine: hermes

我试过react-native link @react-native-ml-kit/text-recognition、npx pod install，清缓存、重置模拟器，都没用。

相关代码 #

问题出在performOCR函数：

import React, {useState} from 'react';
import {Image, Text, TouchableOpacity, View} from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as ImageManipulator from 'expo-image-manipulator';
import TextRecognition from '@react-native-ml-kit/text-recognition';

const NewTransactionScreen = () => {
  const [ocrResult, setOcrResult] = useState('');
  const [galleryPermission, setGalleryPermission] = useState(
    ImagePicker.useMediaLibraryPermissions(),
  );
  const [cameraPermission, setCameraPermission] = useState(
    ImagePicker.useCameraPermissions(),
  );
  const [preprocessedImage, setPreprocessedImage] = useState('');

  // 省略其他函数...

  const performOCR = () => {
    TextRecognition.recognize(preprocessedImage)
      .then(results => {
        console.log('Recognized text:', results.text);

        for (let block of results.blocks) {
          console.log('Block text:', block.text);
          console.log('Block frame:', block.frame);

          for (let line of block.lines) {
            console.log('Line text:', line.text);
            console.log('Line frame:', line.frame);
          }
        }
      })
      .catch(error => {
        console.error(error);
      });
  };

  return (
    <View>
      <Text>Add new transaction: options below</Text>
      {cameraPermission ? (
        <TouchableOpacity
          onPress={() => {
            processCameraImage();
          }}>
          <Text>Camera</Text>
        </TouchableOpacity>
      ) : (
        <TouchableOpacity
          onPress={() => {
            grantCameraAccess();
          }}>
          <Text>Grant Camera Access</Text>
        </TouchableOpacity>
      )}
      {galleryPermission ? (
        <TouchableOpacity
          onPress={() => {
            processLibraryImage();
          }}>
          <Text>Photo Library</Text>
        </TouchableOpacity>
      ) : (
        <TouchableOpacity
          onPress={() => {
            grantLibraryAccess();
          }}>
          <Text>Grant Camera Access</Text>
        </TouchableOpacity>
      )}
      {preprocessedImage ? (
        <Image
          style={{width: 320, height: 400, margin: 10}}
          source={{uri: preprocessedImage}}
        />
      ) : null}
      {preprocessedImage ? (
        <TouchableOpacity
          onPress={() => {
            performOCR();
          }}>
          <Text>Scan Receipt</Text>
        </TouchableOpacity>
      ) : null}
    </View>
  );
};

export default NewTransactionScreen;

只有preprocessedImage存在URI时才会调用performOCR。

package.json依赖片段 #

{
  ...
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.19.3",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/viewpager": "^5.0.11",
    "@react-native-ml-kit/text-recognition": "^1.5.1",
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.19",
    "expo": "^49.0.16",
    "expo-image-manipulator": "11.3.0",
    "expo-image-picker": "^14.5.0",
    "expo-status-bar": "^1.7.1",
    "firebase": "^10.5.0",
    "react": "^18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "^2.13.3",
    "react-native-image-picker": "^7.0.2",
    "react-native-image-resizer": "^1.4.5",
    "react-native-reanimated": "^3.5.4",
    "react-native-safe-area-context": "^4.7.3",
    "react-native-screens": "^3.26.0",
    "react-native-vector-icons": "^10.0.0"
  },
  ...
}

Podfile内容 #

# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, min_ios_version_supported
prepare_react_native_project!

# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
#
# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
# ```js
# module.exports = {
#   dependencies: {
#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
# ```
flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'Mobile' do
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # Hermes is now enabled by default. Disable by setting this flag to false.
    :hermes_enabled => flags[:hermes_enabled],
    :fabric_enabled => flags[:fabric_enabled],
    # Enables Flipper.
    #
    # Note that if you have use_frameworks! enabled, Flipper will not work and
    # you should disable the next line.
    :flipper_configuration => flipper_config,
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'MobileTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false
    )
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

解决方案 #

1. 重新执行完整安装链接流程 #

• 卸载当前包：

  npm uninstall @react-native-ml-kit/text-recognition
  

• 清理项目缓存：

  rm -rf node_modules
  rm package-lock.json
  npm cache clean --force
  

• 重装依赖：

  npm install
  

• 进入iOS目录重新处理Pods：

  cd ios
  pod deintegrate
  pod install --repo-update
  cd ..
  

• 清理Xcode缓存：打开Xcode，点击Product -> Clean Build Folder，之后关闭Xcode再重新编译项目。

2. 修改Podfile配置 #

@react-native-ml-kit/text-recognition需要启用静态框架，在Podfile中添加配置：
在prepare_react_native_project!之前插入：

$MLKitTextRecognitionUseStaticFramework = true

修改后重新执行pod install --repo-update。

3. 验证图片URI格式 #

TextRecognition.recognize仅支持本地文件URI（格式为file:///xxx），如果Expo ImagePicker返回的是assets-library://或ph://开头的URI，需要用expo-file-system的copyAsync方法将图片复制到本地文档目录，再使用新的URI调用OCR。

4. 替换为Expo适配方案 #

如果上述方法都无效，建议切换到Expo官方的expo-ocr，更适配你的Expo裸工作流：

• 安装依赖：

  npx expo install expo-ocr
  

• 修改performOCR函数：

  import * as OCR from 'expo-ocr';
  
  const performOCR = async () => {
    try {
      const result = await OCR.scanAsync(preprocessedImage);
      setOcrResult(result.text);
      console.log('Recognized text:', result.text);
    } catch (error) {
      console.error(error);
    }
  };
  

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