Expo中react-native-mlkit-ocr路径读取失败及OCR替代方案咨询

一、当前代码的核心问题 #

你用普通数组results存储图片路径，但React组件每次重渲染时，这个数组都会被重新初始化（const results = []），导致点击Continue调用mlOCR时，results[0]大概率是undefined。把undefined传给MlkitOcr.detectFromUri，就会触发“无法读取null的属性”错误。

另外你已经有pickedImagePath这个state存图片路径，完全没必要额外搞results数组。

二、修复react-native-mlkit-ocr的用法 #

直接用已有的pickedImagePath，同时增加空值判断和错误捕获，避免崩溃：

import React, { useState } from 'react';
import MlkitOcr from 'react-native-mlkit-ocr';

import { View, Text, Image, TouchableOpacity, Alert } from 'react-native';
import styles from './Styles';

import * as ImagePicker from 'expo-image-picker';

function App() {
  const [pickedImagePath, setPickedImagePath] = useState('');
  const [ocrResult, setOcrResult] = useState(''); // 用来存识别结果

  const showImagePicker = async () => {
    const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (!permissionResult.granted) {
      Alert.alert("权限不足", "需要访问相册权限才能选图");
      return;
    }
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 1,
    });
    if (!result.canceled) {
      setPickedImagePath(result.assets[0].uri);
    }
  }

  const openCamera = async () => {
    const permissionResult = await ImagePicker.requestCameraPermissionsAsync();
    if (!permissionResult.granted) {
      Alert.alert("权限不足", "需要访问相机权限才能拍照");
      return;
    }
    const result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 1,
    });
    if (!result.canceled) {
      setPickedImagePath(result.assets[0].uri);
    }
  }

  const mlOCR = async() => {
    if (!pickedImagePath) {
      Alert.alert("提示", "请先选择或拍摄一张图片");
      return;
    }
    try {
      const resultFromUri = await MlkitOcr.detectFromUri(pickedImagePath);
      console.log(resultFromUri);
      setOcrResult(JSON.stringify(resultFromUri, null, 2)); // 把结果展示出来
    } catch (error) {
      console.error("OCR识别失败:", error);
      Alert.alert("错误", "识别失败，请检查图片或重试");
    }
  }

  return (
    <View style={styles.container}>
      <Text style={{color:'black',fontSize:20}}>Preview Image</Text>
      <View style={styles.imageContainer}>
        {pickedImagePath !== '' && (
          <Image
            source={{ uri: pickedImagePath }}
            style={styles.previewImage}
          />
        )}
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.button} onPress={showImagePicker}>
          <Text style={styles.buttonText}>Select from gallery</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={openCamera}>
          <Text style={styles.buttonText}>Open camera</Text>
        </TouchableOpacity>
      </View>
      <TouchableOpacity style={{marginTop:15}} onPress={mlOCR}>
        <Text style={{color:'black',fontSize:20}}>Continue</Text>
      </TouchableOpacity>
      {/* 新增展示识别结果的区域 */}
      {ocrResult && (
        <View style={{marginTop:20, padding:10, backgroundColor:'#f5f5f5', borderRadius:8}}>
          <Text style={{fontSize:16, color:'#333', fontWeight:'500'}}>识别结果:</Text>
          <Text style={{fontSize:14, marginTop:8, color:'#666'}}>{ocrResult}</Text>
        </View>
      )}
    </View>
  );
}
export default App;

三、Expo环境下无需eject的OCR替代方案 #

如果react-native-mlkit-ocr还是有兼容问题，可以试试这两种方案：

1. Expo官方ML Kit OCR #

Expo提供了原生兼容的expo-ml-ocr库，完全不用eject：

• 安装：npx expo install expo-ml-ocr
• 核心用法示例：

import * as OCR from 'expo-ml-ocr';

const mlOCR = async() => {
  if (!pickedImagePath) return;
  try {
    const result = await OCR.detectTextAsync(pickedImagePath);
    // 把识别到的文本块拼接成完整内容
    const fullText = result.blocks.map(block => block.text).join('\n');
    setOcrResult(fullText);
  } catch (error) {
    console.error("识别出错:", error);
  }
}

2. 云端OCR服务 #

如果设备端OCR效果不理想，可以调用百度、腾讯云等厂商的云端OCR API：

• 步骤：
  1. 用expo-image-manipulator把图片转成base64格式
  2. 通过fetch把base64数据发送到云端API
  3. 解析返回的JSON结果，提取文本内容
     这种方式不依赖本地库，兼容性拉满，还能获得更好的识别精度。

四、注意事项 #

• 记得在app.json里配置权限声明，比如iOS的相机、相册权限描述，Android的权限申请
• 尽量用真机测试，模拟器可能会有图片路径或权限的兼容问题

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