在移动应用开发中，当我们需要处理复杂的图像处理、机器学习算法或高性能计算时，纯 JavaScript 往往无法满足性能要求。这时，我们就需要借助原生模块的力量。本文将深入探讨如何在 React Native 项目中集成 C++ 原生模块，特别是通过 Turbo Modules 实现的高性能影像处理功能。

TurboModule 是 React Native 中用于 JavaScript 和原生代码进行交互的模块，为 RN JS 应用提供调用系统能力的机制。根据是否依赖 OpenHarmony 系统相关的能力，可以分为两类： cxxTurboModule 和 ArkTSTurboModule。

1. ArkTSTurboModule：
   • ArkTSTurboModule 为 React Native 提供了调用 ArkTS 原生 API 的方法。可以分为同步与异步两种。
   • ArkTSTurboModule 依赖 NAPI 进行原生代码与 CPP 侧的通信。包括 JS 与 C 之间的类型转换，同步和异步调用的实现等。
2. cxxTurboModule：
   • cxxTurboModule 主要提供的是不需要系统参与的能力，例如NativeAnimatedTurboModule 主要提供了数据计算的相关能力。
   • cxxTurboModule 不依赖于系统的原生 API，为了提高相互通信的效率，一般是在 cpp 侧实现，这样可以减少 native 与 cpp 之间的通信次数，提高性能。

React Native TurboModule是React Native新架构的核心组件之一，主要用于实现JavaScript与原生代码（如Java/C++）的高效通信，支持复杂功能的原生模块开发。

核心功能

• 提供类型安全接口：通过Codegen工具生成代码，确保JS与原生方法签名一致 。 ‌
• 支持异步调用：通过Promise机制处理耗时操作（如设备控制、图像处理） 。 ‌
• 与Fabric渲染器协同：共同构成新架构的两大支柱，后者负责UI组件渲染 。 ‌

实现流程

-‌ 定义接口‌：在JS中声明TurboModule接口（如NativeTurboTestSpec），指定方法名和参数类型 。 ‌

• 生成代码‌：使用Codegen工具生成原生代码模板（如Java类NativeTurboTest） 。 ‌

-‌ 实现原生逻辑‌：继承生成的类并实现具体方法（如add(double a, double b, Promise promise)） 。 ‌

-‌ 集成到应用‌：通过ReactPackage注册模块，由ReactInstance加载并管理 。 ‌

典型应用场景

‌医疗影像处理‌：集成C++模块实现图像算法（如AI检测、设备控制），通过TurboModule暴露接口供JS调用 。 ‌

‌设备交互‌：如蓝牙连接、传感器数据采集，需原生代码直接操作硬件 。 ‌

与传统Native Module的区别

性能更优：基于JSI（JavaScript Interface）实现，减少桥接开销 。 ‌

类型安全：接口定义严格，避免运行时类型错误 。

技术架构概览

1. Turbo Modules 架构

Turbo Modules 是 React Native 的新一代原生模块系统，相比传统的 Native Modules，它提供了更好的性能和类型安全。

// src/specs/NativeImageProcessorModule.ts
export interface Spec extends TurboModule {
    // AI 人脸检测
    ml_getAiFaceImgByPath: (imgPath: string, isYMirror: number) => BinaryData;
    ml_getAiFaceImgByDatas: (dataBase64Str: string, width: number, height: number, isYMirror: number) => BinaryData;
    
    // TensorFlow Lite 模型管理
    ml_createTFLite: (modelData: string, isEncrypt: number, modelType: number) => void;
    ml_deleteTFLite: () => void;
    
    // 照片质量检测
    ml_predictByPaths: (imgPath: string, imgPath2: string, imgPath3: string) => Struct2PredictResult;
    ml_predictByData: (
        dataBase64Str: string,
        width: number,
        height: number,
        imageType: number,
        plane1: string,
        plane2: string,
        bytesPerRow: number,
        bytesPerPixel: number,
        yRowStride: number,
    ) => Struct2PredictResult;
    
    // 设备控制
    ml_is_device_connect: () => number;
    ml_connect_device: () => void;
    ml_enable_image_transit: () => void;
    ml_retrieve_image: () => Struct2DeviceImage;
}

2. C++ 核心模块设计

2.1 FFI 接口层
// shared/ImageProcessorFFI.h
extern "C" {
    // AI 人脸检测
    Struct2AIFace getAiFaceImgByPath(const char *imgPath, int isYMirror);
    Struct2AIFace getAiFaceImgByDatas(uint8_t *imgDatas, int width, int height, int isYMirror);
    
    // TensorFlow Lite 模型管理
    void createTFLite(uint8_t *modalData, int modalDataLen, int isEncrypt, enum ModelType modelType);
    void deleteTFLite();
    
    // 照片质量检测
    Struct2PredictResult predictByPaths(const char *imgPath, const char *imgPath2, const char *imgPath3);
    Struct2PredictResult predictByData(uint8_t *imgData, int width, int height, enum ImageType type, 
                                       uint8_t *plane1, uint8_t *plane2, int bytesPerRow, 
                                       int bytesPerPixel, int yRowStride);
    
    // 设备控制
    int is_device_connect();
    void connect_device();
    void enable_image_transit();
    Struct2DeviceImage retrieve_image();
}

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。