React Native Turbo Modules 与 C++ 原生模块集成

go圈JS分享者

于 2025-10-21 14:18:16 发布

阅读量626

点赞数 18

CC 4.0 BY-SA版权

分类专栏： React Native 文章标签： react native c++ react.js

本文链接：https://blog.csdn.net/qq_35214930/article/details/153687997

React Native 专栏收录该内容

2 篇文章

订阅专栏

#【1024征文】以 1024 之名，写我与代码的「双向奔赴」#

React Native Turbo Modules 与 C++ 原生模块集成：打造高性能影像处理应用

前言

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

项目背景

这是一个医疗影像处理应用，核心功能是通过专业设备进行影像采集，并对采集结果进行 AI 分析。项目采用了 React Native + Expo 技术栈，但为了处理复杂的图像算法和设备控制，我们集成了大量的 C++ 原生模块。

技术架构概览

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();
}

2.2 Turbo Module 实现层

// shared/NativeImageProcessorModule.h
class NativeImageProcessorModule : public NativeImageProcessorModuleCxxSpec<NativeImageProcessorModule> {
public:
    NativeImageProcessorModule(std::shared_ptr<CallInvoker> jsInvoker);
    
    // 类型安全的 JSI 接口
    jsi::ArrayBuffer ml_getAiFaceImgByPath(jsi::Runtime& rt, const std::string& imgPath, int isYMirror);
    jsi::Object ml_predictByPaths(jsi::Runtime& rt, const std::string& imgPath, 
                                 const std::string& imgPath2, const std::string& imgPath3);
    
private:
    // 数据转换工具
    jsi::ArrayBuffer createArrayBuffer(jsi::Runtime& rt, const Struct2AIFace& structAIFace);
    std::vector<uint8_t> base64_decode(const std::string &encoded);
    
    // 内存管理
    std::shared_ptr<DataBuffer> shared_data_{nullptr};
};

核心功能实现

1. AI 图像处理管道

影像处理应用的核心是图像处理管道，包括：

图像预处理：亮度检测、清晰度增强、颜色校正
AI 分析：基于 TensorFlow Lite 的物体检测和分类
质量评估：多维度照片质量检测

// 使用示例
const NativeImageProcessor = NativeImageProcessorModule as Spec;

// 1. 初始化 AI 模型
await NativeImageProcessor.ml_createTFLite(modelDataBase64, 1, ModelType.OBJECT_DETECTION);

// 2. 照片质量检测
const predictResult = await NativeImageProcessor.ml_predictByPaths(
    imagePath1, 
    imagePath2, 
    imagePath3
);

// 3. 获取检测结果
const { last1, last2, last3, mco, runMs } = predictResult;
console.log(`AI 分析耗时: ${runMs}ms`);

2. 设备控制与数据采集

影像设备控制是另一个核心功能：

// 设备连接管理
class ImageDeviceManager {
    async connectDevice(): Promise<boolean> {
        try {
            await NativeImageProcessor.ml_connect_device();
            const isConnected = await NativeImageProcessor.ml_is_device_connect();
            return isConnected === 1;
        } catch (error) {
            console.error('设备连接失败:', error);
            return false;
        }
    }
    
    async startImageCapture(): Promise<void> {
        await NativeImageProcessor.ml_enable_image_transit();
    }
    
    async captureImage(): Promise<Struct2DeviceImage> {
        return await NativeImageProcessor.ml_retrieve_image();
    }
    
    async getBatteryLevel(): Promise<number> {
        return await NativeImageProcessor.ml_get_battery_percent();
    }
}

3. 内存管理与性能优化

3.1 数据缓冲区管理

class DataBuffer : public jsi::MutableBuffer {
public:
    DataBuffer(size_t size): size_(size) {
        data_ = new uint8_t[size_];
    }
    
    DataBuffer(uint8_t* data, size_t size): size_(size) {
        data_ = data;
    }
    
    ~DataBuffer() {
        if(data_) {
            delete[] data_;
            data_ = nullptr;
        }
    }
    
    virtual size_t size() const { return size_; }
    virtual uint8_t* data() { return data_; }
    
private:
    size_t size_ = 0;
    uint8_t* data_ = nullptr;
};

3.2 Base64 编解码优化

std::vector<uint8_t> NativeImageProcessorModule::base64_decode(const std::string &encoded) {
    // 使用高效的 Base64 解码算法
    // 避免频繁的内存分配
    std::vector<uint8_t> decoded;
    decoded.reserve(encoded.length() * 3 / 4);
    
    // 实现 Base64 解码逻辑
    // ...
    
    return decoded;
}

性能优化策略

1. 异步处理

所有耗时的 C++ 操作都通过异步方式调用，避免阻塞 JavaScript 线程：

// 异步图像处理
const processImageAsync = async (imagePath: string) => {
    return new Promise((resolve, reject) => {
        // 在后台线程处理
        setTimeout(async () => {
            try {
                const result = await NativeImageProcessor.ml_predictByPath(imagePath);
                resolve(result);
            } catch (error) {
                reject(error);
            }
        }, 0);
    });
};

2. 内存池管理

class MemoryPool {
private:
    std::queue<std::shared_ptr<DataBuffer>> available_buffers_;
    std::mutex mutex_;
    
public:
    std::shared_ptr<DataBuffer> acquire(size_t size) {
        std::lock_guard<std::mutex> lock(mutex_);
        
        if (!available_buffers_.empty()) {
            auto buffer = available_buffers_.front();
            available_buffers_.pop();
            return buffer;
        }
        
        return std::make_shared<DataBuffer>(size);
    }
    
    void release(std::shared_ptr<DataBuffer> buffer) {
        std::lock_guard<std::mutex> lock(mutex_);
        available_buffers_.push(buffer);
    }
};

3. 错误处理与容错

// 类型安全的错误处理
const safeCallNativeMethod = async <T>(
    method: () => Promise<T>,
    fallback: T
): Promise<T> => {
    try {
        return await method();
    } catch (error) {
        console.error('Native method call failed:', error);
        return fallback;
    }
};

// 使用示例
const predictResult = await safeCallNativeMethod(
    () => NativeImageProcessor.ml_predictByPath(imagePath),
    { last1: {}, last2: {}, last3: {}, mco: {}, runMs: 0, totalMs: 0 }
);

开发调试技巧

1. 类型定义管理

// src/specs/exports/structs.ts
export type Struct2PredictResult = {
    last1: Struct2LastTFLite;
    last2: Struct2LastTFLite;
    last3: Struct2LastTFLite;
    mco: Struct2TFLiteMCO;
    runMs: number;
    totalMs: number;
};

export type Struct2LastTFLite = {
    rects: readonly number[];
    rectEleCount: number;
    rectsLength: number;
    num_classes: number;
    blurInfo: Struct2LastTFLiteBlurInfo;
    importNetOriImgW: number;
    importNetOriImgH: number;
};

2. 开发环境兼容

// 开发环境下的 Mock 实现
export default !CAN_USE_TURBO_MODULES
    ? ({
          ml_predictByPaths: () => ({}) as Struct2PredictResult,
          ml_createTFLite: () => {},
          ml_deleteTFLite: () => {},
          // ... 其他 Mock 方法
      } as const)
    : (TurboModuleRegistry.getEnforcing<Spec>('NativeImageProcessorModule') as Spec);