在实际项目中，开发者经常会遇到以下痛点：

• 🔧 Bridge 频繁通信导致卡顿——UI 卡顿、动画不流畅。
• ⚙️ 原生能力调用繁琐——需要手写大量桥接代码。
• 🛠️ 调试难度大——跨线程、跨语言的错误难以定位。
• 🚀 高频业务性能不足——如视频处理、实时传感器数据。

RN 与原生的关系

React Native 本质上是：

整体结构示意这方面，

JS 层 | Bridge / JSI | Native 层
↳ 程序能力：Camera / GPS / Bluetooth / UI

. RN 需要原生能力时的调用链

• JS 调摄像头、支付 SDK、蓝牙等。
• Native 主动通知 JS。

. RN Bridge

传统 RN 架构依赖 JSON 消息在 JS Thread 与 Native Thread 之间传递：

JS Thread ⇄ JSON Message ⇄ Bridge ⇄ Native Modules

Bridge 的职责：

1. 方法调用转发。
2. 参数序列化 / 反序列化。
3. 跨线程消息传递。

. 示例：获取电池电量

JS 调用：

NativeModules.DeviceInfo.getBattery

Bridge 传输的 JSON：

{
"module": "DeviceInfo","method": "getBattery"
}

Android 原生实现：

public class DeviceInfoModule extends ReactContextBaseJavaModule {
@Override
public String getName {
return "DeviceInfo";}
@ReactMethod
public void getBattery {
int level = /* 获取电池电量 */;promise.resolve;}
}

JS 接收结果：

const battery = await NativeModules.DeviceInfo.getBattery;console.log，

. Native Module 原生模块桥接

. Android 示例

Create Module:

public class ToastModule extends ReactContextBaseJavaModule {
@Override
public String getName {
return "ToastAndroid";}
@ReactMethod
public void show {
Toast.makeText。msg,Toast.LENGTH_SHORT).show;}
}

import { NativeModules } from 'react-native';NativeModules.ToastAndroid.show;

. iOS 示例

@objc
class ToastModule: NSObject {
@objc func show {
print
// 可使用 UIAlert 或其他 UI 展示
}
}

import { NativeModules } from 'react-native';
NativeModules.ToastModule.show;

. Native 主动调用 JS

当原生收到推送、蓝牙数据或支付结果，需要主动通知前端。

. 流程图示意

Native → EventEmitter → Bridge → JS Listener

JS 端监听：

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

Android 发事件代码示例：

private void sendEvent {
reactContext
.getJSModule
.emit;}
sendEvent，

. Native UI 组件桥接

除了方法调用。还可以让 RN 使用原生 View，实现更高性能和网站特性。

. 使用场景示例：地图组件

JS 声明：

AOSP/Apple 实现对应的原生 View：

• • Android：MapView
• iOS：MKMapView • 两者均通过 ViewManager 暴露给 JS。

Android ViewManager 示例：

public class MapViewManager extends SimpleViewManager {
@Override
public String getName {
return "RCTMap";}
@Override
protected MapView createViewInstance {
return new MapView;}
}


. TurboModule 

The new architecture 用 JSI 替代了传统 Bridge。使得 JS 能直接访问 C++ 层的原生实现，从根本上提高性能。其实，



对比旧 Bridge vs TurboModule 



旧 Bridge
JSON 序列化 + 异步消息
性能损耗大
只能异步调用

Turbomodule
直接 C++ 调用
支持同步 & 异步
零序列化开销
类型安全 & 动态查找更快





. Fabric 渲染程序 

The Fabric Renderer 将 UI 更新方法从 “JS → Bridge → UIManager → 原生 View” 改为 “JS → JSI → Fabric → 原生 UI”。实现更快、更细粒度的渲染。


# 更快 UI 更新 —— 减少线程切换。其实，

# 支持 Concurrent React —— 多并发渲染。

# 更低内存使用 —— 增量批处理。


. JSI 是关键 

JSI 为 JavaScript 提供了一个可以直接操作 C++ 对象的入口。省去 JSON 编码/解码过程，极大提高了计算密集型场景的性能。

. 常见基于 JSI 的高性能库 


Reanimated v2 – 动画 Worklet 在 C++ 中运行。

NNG/MMKV – 高速键值存储。

@shopify/react-native-skia – GPU 加速绘图。


. RN 与 Native 通信方式 



--- The above was a formatting error due to stray characters. Please disregard.

--- End of corrected table.

表格已修正

--- End of answer.


场景 
推荐方法 
说明 




# JS 调原生方法 
# Native Module 
# 适用于获取设备信息、程序权限等轻量交互。


# 原生主动推送数据给 JS 
# EventEmitter + Bridge / JSI 
# 用于推送、蓝牙回调、实时位置等持续事件。


# 高频率、大数据计算或实时渲染 
# TurboModule + JSI 
# 消除 JSON 序列化。支持同步调用，性能较强，


# 自定义原生 UI 控件

# Native Component + Fabric
 

# 将网站原环境 View 暴露给 React，配合 Fabric 可获得更流畅渲染。}

---