如何在现有原生应用中使用React Native Turbo Module？

结论是肯定的——你可以在现有原生应用中直接编写并使用Turbo Module，且完全兼容CodeGen。以下是验证可行的实现步骤，包括解决Android端TurboReactPackage无法返回模块实例的问题：

通用前置准备 #

• 确保你的React Native集成环境已启用新架构（Turbo Module + Fabric），CodeGen工具配置完成
• 在RN的JS代码目录下创建Turbo Module的TypeScript spec文件（比如MyNativeModule.ts），定义模块接口：

import { TurboModule, TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  readonly getNativeData: () => Promise<string>;
}

export default TurboModuleRegistry.get<Spec>('MyNativeModule') as Spec | null;

• 运行CodeGen生成原生端spec文件：yarn react-native codegen，生成的文件会自动放到iOS/Android项目的build目录下的codegen文件夹中

Android端实现（解决模块实例返回问题） #

1. 在现有安卓项目的合适目录（比如app/src/main/java/com/yourapp/reactnative/modules）下创建模块实现类，继承CodeGen生成的MyNativeModuleSpec：

package com.yourapp.reactnative.modules;

import com.facebook.react.bridge.Promise;
import com.facebook.react.turbomodule.core.interfaces.TurboModule;

public class MyNativeModule extends MyNativeModuleSpec implements TurboModule {
    public MyNativeModule() {
        super();
    }

    @Override
    public void getNativeData(Promise promise) {
        // 直接调用现有安卓应用的原生业务逻辑
        String nativeData = YourExistingUtils.fetchAppData();
        promise.resolve(nativeData);
    }
}

2. 创建自定义TurboReactPackage，必须重写getModule和getModuleNames方法（这是之前无法返回实例的核心原因）：

package com.yourapp.reactnative;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.turbomodule.core.interfaces.TurboModule;
import com.yourapp.reactnative.modules.MyNativeModule;

import java.util.Arrays;
import java.util.List;
import java.util.Map;
import java.util.HashMap;

public class CustomTurboPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.asList(new MyNativeModule());
    }

    @Override
    public Map<String, TurboModule> getModule(String name, ReactApplicationContext reactContext) {
        Map<String, TurboModule> modules = new HashMap<>();
        if (name.equals("MyNativeModule")) {
            modules.put(name, new MyNativeModule());
        }
        return modules;
    }

    @Override
    public List<String> getModuleNames() {
        return Arrays.asList("MyNativeModule");
    }
}

3. 在ReactNativeHost的getPackages方法中添加自定义包：

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new CustomTurboPackage());
    return packages;
}

iOS端实现 #

1. 在现有iOS项目中创建Swift类，实现CodeGen生成的MyNativeModuleSpec协议：

import Foundation
import React

class MyNativeModule: NSObject, MyNativeModuleSpec {
    func getNativeData(_ resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
        // 直接调用现有iOS应用的原生业务逻辑
        let nativeData = YourExistingUtils.fetchAppData()
        resolve(nativeData)
    }

    static func moduleName() -> String! {
        return "MyNativeModule"
    }

    static func requiresMainQueueSetup() -> Bool {
        return true
    }
}

2. 在RN桥接初始化代码中注册Turbo Module（比如AppDelegate.swift）：

import React

func setupReactBridge() {
    let bridge = RCTBridge(delegate: self, launchOptions: nil)
    bridge.turboModuleRegistry.registerModuleClass(MyNativeModule.self)
}

3. 若使用Swift，确保在项目的Bridging Header中导入CodeGen生成的头文件：

#import <React/RCTTurboModule.h>
#import "MyNativeModuleSpec.h"

验证使用 #

在RN的JS代码中直接导入并调用：

import MyNativeModule from './src/MyNativeModule';

// 调用原生方法
MyNativeModule?.getNativeData().then(data => {
    console.log('获取原生应用数据:', data);
});

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