React Native与原生交互的原理

React Native（RN）与原生平台（iOS/Android）的交互是通过桥接机制（Bridge）实现的，核心原理是将JavaScript代码与原生代码分离，通过异步通信在两者之间传递数据和调用方法。以下是详细原理和关键流程：

---

1. 桥接机制（Bridge）

• 异步通信：JavaScript和原生代码运行在不同的线程（JS线程和主线程/UI线程），通过桥接进行序列化消息传递，避免直接阻塞。
• 序列化/反序列化：数据通过JSON格式序列化后跨线程传递，原生端收到后反序列化处理。

2. JavaScript调用原生功能

方法一：Native Modules

• 原生模块注册：
  iOS：创建实现RCTBridgeModule协议的类，用RCT_EXPORT_MODULE宏导出。
  Android：继承ReactContextBaseJavaModule，通过@ReactMethod注解暴露方法。
• JS端调用：

  import { NativeModules } from 'react-native';
  NativeModules.MyNativeModule.doSomething(params);
  

方法二：原生UI组件

• 自定义视图：
  iOS：继承RCTViewManager，通过RCT_EXPORT_VIEW_PROPERTY导出属性。
  Android：继承SimpleViewManager，重写createViewInstance方法。
• JS端使用：

  import { requireNativeComponent } from 'react-native';
  const MyNativeView = requireNativeComponent('MyNativeView');
  

---

3. 原生调用JavaScript

• 事件机制（EventEmitter）：
  原生模块通过RCTEventEmitter（iOS）或RCTDeviceEventEmitter（Android）发送事件。
  JS端通过NativeEventEmitter监听：

  const emitter = new NativeEventEmitter(NativeModules.MyModule);
  emitter.addListener('EventName', (data) => { ... });
  

---

4. 通信流程示例

1. JS调用原生方法：

   • JS线程将调用信息序列化为JSON。
   • 通过桥接传递到原生队列。
   • 原生模块解析并执行对应方法，返回结果（异步）。

2. 原生发送事件到JS：

   • 原生模块触发事件，数据被序列化。
   • 桥接将事件转发到JS线程，JS端监听器处理。

---

5. 性能优化与新架构（Fabric & TurboModules）

React Native的新架构逐步替代旧桥接机制：

• Fabric：直接同步渲染UI组件，减少通信延迟。
• TurboModules：按需加载原生模块，提升启动速度。
• JSI（JavaScript Interface）：用C++实现JS与原生直接内存访问，取代序列化。

---

关键点总结

• 异步通信：默认所有交互都是异步的，避免阻塞UI。
• 线程模型：JS线程与主线程分离，通过桥接协调。
• 扩展性：通过Native Modules和Native Components灵活扩展功能。

通过这种设计，React Native在保持开发效率的同时，能够深度集成原生能力。