使用react-native-mlkit-ocr时detectFromUri未定义问题求助

核心问题分析 #

你遇到的Cannot read properties of undefined (reading 'detectFromUri')错误，主要来自三个方面：

• 库的导入方式错误，重复导入且使用了未正确导出的变量MLKit
• detectFromUri是异步方法，未用await处理Promise，也未正确捕获异步错误
• Expo Go环境不支持该原生模块，需预构建项目

分步解决方案 #

1. 修正库的导入 #

react-native-mlkit-ocr的默认导出是MlkitOcr，删除多余导入语句，仅保留正确的一行：

import MlkitOcr from 'react-native-mlkit-ocr';

2. 正确调用异步方法 #

detectFromUri是异步函数，必须用await等待结果，且需在async函数中调用：
修改识别按钮的点击逻辑：

onPress={async ()=>{
  try {
    console.log("当前url：", url);
    if(url) {
      const ocrResult = await MlkitOcr.detectFromUri(url);
      // 提取并拼接所有识别到的文本块
      const recognizedText = ocrResult.blocks.map(block => block.text).join('\n');
      console.log("识别结果：", recognizedText);
    } else {
      console.log("请先选择图片");
    }
  } catch (error) {
    console.error("识别出错：", error);
  }
}}

3. 处理Expo环境兼容性 #

react-native-mlkit-ocr是原生模块，Expo Go无法直接运行，需执行以下操作：

• 运行npx expo prebuild生成原生项目文件
• 使用eas build构建自定义开发客户端，或直接通过Xcode/Android Studio在本地原生环境运行
• 配置权限：iOS在Info.plist中添加NSPhotoLibraryUsageDescription；安卓在AndroidManifest.xml中添加<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

修正后的完整代码 #

import { View, Text, Pressable } from 'react-native'
import React, { useState } from 'react';
import * as ImagePicker from 'expo-image-picker';
import { styles } from './stying';
import { Ionicons } from '@expo/vector-icons';
import MlkitOcr from 'react-native-mlkit-ocr';

export default function Main() {
    const [url, setUrl] = useState("");

    return (
        <View style={styles.container}>
            <Pressable 
                style={[
                    ({pressed}) => [{
                        backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
                    }],
                    {
                        backgroundColor: 'black',
                        borderRadius:10,
                        padding:10,
                        justifyContent:'center',
                        alignItems:'center',
                        alignSelf:'center',
                    }
                ]} 
                onPress={async ()=>{
                    try {
                        let res = await ImagePicker.launchImageLibraryAsync();
                        console.log(res);
                        if(!res.canceled) {
                            setUrl(res.assets[0].uri);
                            console.log("url已更新为：", res.assets[0].uri);
                        }
                    } catch (error) {
                        console.log(error.message);
                    }
                }} 
            >
                <Text style={{fontSize:20, color:'white'}}>
                    <Ionicons name="md-image" size={30} color="white" /> Select your image
                </Text>
            </Pressable>

            <Pressable 
                style={[
                    ({pressed}) => [{
                        backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
                    }],
                    {
                        backgroundColor:'black',
                        borderRadius:10,
                        padding:10,
                        justifyContent:'center',
                        alignItems:'center',
                        alignSelf:'center',
                        marginTop:20
                    }
                ]} 
                onPress={async ()=>{
                    try {
                        console.log("当前url：", url);
                        if(url) {
                            const ocrResult = await MlkitOcr.detectFromUri(url);
                            const recognizedText = ocrResult.blocks.map(block => block.text).join('\n');
                            console.log("识别结果：\n", recognizedText);
                        } else {
                            console.log("请先选择图片");
                        }
                    } catch (error) {
                        console.error("OCR识别失败：", error);
                    }
                }} 
            >
                <Text style={{color:'white', fontSize:22, padding:10}}>识别文字</Text>
            </Pressable>
        </View>
    )
}

额外注意事项 #

• 确保已正确安装库：npm install react-native-mlkit-ocr 或 yarn add react-native-mlkit-ocr
• 若使用Expo，必须通过预构建或自定义客户端运行，Expo Go不支持原生第三方模块

内容的提问来源于stack exchange，提问作者a s r