JavaScript (RN)              |              |        Native Module 调用              |     ---------------------     |                   | Android Native      iOS Native (Java/Kotlin)       (Obj-C/Swift)     |                   |     |                   | 系统能力/API       系统能力/API

class DeviceModule(
    reactContext: ReactApplicationContext
) : ReactContextBaseJavaModule(reactContext) {
    override fun getName(): String {
        return "DeviceModule"
    }
    @ReactMethod
    fun getDeviceName(promise: Promise) {
        val name = Build.MODEL
        promise.resolve(name)
    }
}

class MyPackage : ReactPackage {
    override fun createNativeModules(
        context: ReactApplicationContext
    ): List<NativeModule> {
        return listOf(
            DeviceModule(context)
        )
    }
}

packages.add(MyPackage())

import {
 NativeModules
} from 'react-native';
const {DeviceModule} = NativeModules;
DeviceModule.getDeviceName()
.then(name=>{
    console.log(name)
});

JS | | DeviceModule.getDeviceName() |Bridge |Android Module |promise.resolve() |Bridge |JS Promise.then()

@objc(DeviceModule)
class DeviceModule: NSObject {
 @objc
 func getDeviceName(
    _ resolve:RCTPromiseResolveBlock,
    rejecter reject:RCTPromiseRejectBlock
 ){
    let name =
      UIDevice.current.name
    resolve(name)
 }
 @objc
 static func requiresMainQueueSetup()
 -> Bool {
    return false
 }
}

#import <React/RCTBridgeModule.h>@interface RCT_EXTERN_MODULE(DeviceModule,NSObject)RCT_EXTERN_METHOD(getDeviceName:resolver:(RCTPromiseResolveBlock)rejecter:(RCTPromiseRejectBlock))@end

RN 调用方式和 Android 一样：

DeviceModule.getDeviceName()
.then(console.log)

4. 原生主动回调 RN

例如：

这种不是 RN 调原生，而是：

Native  |  |EventEmitter  |  |React Native JS

Android 回调 RN

原生发送事件

reactContext
.getJSModule(
 DeviceEventManagerModule.RCTDeviceEventEmitter::class.java
)
.emit(
 "onLogin",
 "success"
)

JS监听

import {
 NativeEventEmitter,
 NativeModules
} from 'react-native';
const emitter =
new NativeEventEmitter(
 NativeModules.DeviceModule
);
const sub =
emitter.addListener(
 "onLogin",
 data=>{
    console.log(data)
 }
);

收到：

Android emit("onLogin")        |        | RN JS listener

5. iOS 回调 RN

Objective-C：

#import <React/RCTEventEmitter.h>@interface DeviceModule:RCTEventEmitter@end

发送：

[self sendEventWithName: @"onLogin" body:@{   @"status":@"success" }];

JS：

const emitter =
new NativeEventEmitter(
 NativeModules.DeviceModule
);
emitter.addListener(
"onLogin",
data=>{
 console.log(data)
});

6. Promise vs Callback vs Event

RN 原生通信常见三种：

例如：

获取电量

Promise：

RN |getBattery() |Native |return 80%

适合。

蓝牙扫描

Event：

Native发现设备1  |emit发现设备2  |emit发现设备3

适合。

7. 新架构 Fabric / TurboModule 下

你之前问过 RN Fabric，这里关联：

旧架构：

JS |Bridge(JSON) |Native

性能瓶颈：

新架构：

JS |JSI |C++层 |TurboModule |Native

特点：

例如：

旧：

NativeModules.Device.getName()

↓

Bridge消息

新：

JS |JSI Function |C++ |Kotlin/Swift

8. 实际项目结构

比如微信扫码登录：

RN:

LoginModule.scanQRCode()

Native:

Android:

startCamera()
scan()

扫码成功：

emit(
"QRCodeResult",
{
 code:"abc123"
}
)

RN:

listener(
data=>{
 login(data.code)
}
)

流程：

RN点击登录       |       |Native打开微信扫码       |       |扫码完成       |       |Native Event       |       |RN收到code       |       |请求服务器登录

所以 RN 和原生通信可以总结为：

RN调用原生：NativeModules / TurboModule原生返回一次：Promise原生持续通知：EventEmitter新架构：JSI + TurboModule + Fabric

如果你正在研究 RN Fabric 渲染流程 + JSI + TurboModule，下一步可以看 TurboModule 从 JS 到 Kotlin/Swift 的完整调用链源码流程。