React Native（安卓/iOS）图片文字识别：react-native-camera添加onTextRecognized后崩溃

针对你使用react-native-camera v4.2.1添加onTextRecognized回调后相机崩溃的问题，可按以下步骤排查或改用替代方案：

一、排查react-native-camera崩溃原因 #

1. 检查依赖配置是否完整 #

• 安卓端：确认android/app/build.gradle中已引入文字识别所需的Google Play Services依赖：

  implementation 'com.google.android.gms:play-services-vision:20.1.3'
  

  同时确保AndroidManifest.xml中已添加相机权限：

  <uses-permission android:name="android.permission.CAMERA" />
  

• iOS端：检查Info.plist的相机权限配置是否正确，执行pod install确保依赖完全安装：

  <key>NSCameraUsageDescription</key>
  <string>需要使用相机进行文字识别</string>
  

2. 简化回调逻辑排查 #

先把onTextRecognized的实现简化到最基础，排除回调内部代码导致的崩溃：

onTextRecognized = (data) => {
  // 先仅输出日志，避免复杂操作
  console.log('识别到的文本数据:', data);
};

如果简化后不再崩溃，再逐步添加业务逻辑，定位问题点。

3. 版本兼容性问题 #

react-native-camera v4.2.1的文字识别模块可能存在已知bug，可尝试升级到该库的最新稳定版本，或降级到v3.x系列（如果项目依赖允许），看是否能解决崩溃问题。

二、替代方案：使用react-native-mlkit实现文字识别 #

既然你已经尝试过react-native-mlkit，这里给出更完整的实现思路——结合RNCamera拍摄图片后，调用ML Kit的文字识别API：

1. 安装依赖 #

npm install @react-native-ml-kit/text-recognition
# 或用yarn
yarn add @react-native-ml-kit/text-recognition

按照库文档完成安卓和iOS的基础配置（权限、依赖引入等）。

2. 完整代码示例 #

import React, { Component } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { RNCamera } from 'react-native-camera';
import TextRecognition from '@react-native-ml-kit/text-recognition';

class TextRecognitionScreen extends Component {
  camera = null;

  captureAndRecognize = async () => {
    if (!this.camera) return;
    
    // 拍摄照片
    const photoOptions = { quality: 0.6, base64: false };
    const photoData = await this.camera.takePictureAsync(photoOptions);

    try {
      // 调用ML Kit识别文字
      const recognitionResult = await TextRecognition.recognize(photoData.uri);
      console.log('识别结果:', recognitionResult.text);
      // 这里处理识别到的文字，比如更新状态展示到界面
    } catch (error) {
      console.error('文字识别失败:', error);
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={ref => this.camera = ref}
          style={styles.cameraPreview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.off}
          captureAudio={false}
          autoFocus={RNCamera.Constants.AutoFocus.on}
          androidCameraPermissionOptions={{
            title: '相机权限申请',
            message: '需要获取相机权限进行文字识别',
            buttonPositive: '确定',
            buttonNegative: '取消'
          }}
        />
        <Button 
          title="拍摄并识别文字" 
          onPress={this.captureAndRecognize}
          style={styles.captureButton}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cameraPreview: {
    width: '100%',
    height: '80%',
  },
  captureButton: {
    marginTop: 20,
    width: '80%',
  },
});

export default TextRecognitionScreen;

注意事项 #

• 安卓设备需确保Google Play Services正常运行，国内设备可考虑配置ML Kit的离线识别模型，避免依赖网络；
• iOS端需确认Xcode版本符合库的要求，执行pod install后重启Xcode再运行项目。

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