返回
React Native 与 iOS 通信机制解析——通信篇
IOS
2024-02-20 04:43:20
# **React Native 与 iOS 通信机制解析——通信篇**
在上一篇 [React Native 与 iOS 原生通信原理解析——JS 加载及执行篇](https://juejin.cn/post/6962020936125227022) 中，我们对 React Native (RN) 的 JS 加载及执行过程进行了详细解析。在这一篇中，我们将继续深入理解 RN 与 iOS 原生之间的通信机制，探究 RN 如何与 iOS 原生模块进行交互，实现数据的传递和功能的调用。
## **1. 通信概述**
在 RN 应用中，JS 代码与 iOS 原生代码之间存在着天然的鸿沟，需要通过桥接机制来实现通信。RN 使用 [JavaScriptCore (JSC)](https://developer.apple.com/documentation/javascriptcore) 作为 JS 引擎，它提供了 JSI (JavaScript Interface) 接口，允许 JavaScript 代码与 C++ 代码进行交互。iOS 原生代码通过 [Objective-C](https://developer.apple.com/documentation/objectivec) 或 [Swift](https://developer.apple.com/documentation/swift) 语言编写，同样也提供了与 JSI 通信的接口。
## **2. 通信原理**
RN 与 iOS 原生通信的基本原理如下图所示：
1. **JS 代码通过 JSI 接口发送消息。**
2. **JSI 将消息传递给 JSContext。**
3. **JSContext 将消息传递给 JSC。**
4. **JSC 将消息传递给 JSIExecutor。**
5. **JSIExecutor 将消息传递给 RCTBridge。**
6. **RCTBridge 将消息传递给 RNEventEmitter。**
7. **RNEventEmitter 将消息发送给 iOS 原生模块。**
8. **iOS 原生模块处理消息并返回结果。**
9. **结果通过逆向路径返回给 JS 代码。**
## **3. 关键组件**
### **3.1 JSI**
JSI 是 JavaScript Interface 的缩写，它是 JSC 中的一个接口，允许 JavaScript 代码与 C++ 代码进行交互。JSI 提供了多种方法，允许 JavaScript 代码调用 C++ 函数、创建和操作 JavaScript 对象等。
### **3.2 JSContext**
JSContext 是 JavaScript 上下文的缩写，它代表着一个 JavaScript 运行时环境。在 RN 中，每个线程都有一个 JSContext，它负责管理 JavaScript 代码的执行。
### **3.3 JSC**
JSC 是 JavaScriptCore 的缩写，它是苹果公司开发的 JavaScript 引擎。JSC 是 RN 中默认的 JavaScript 引擎，它负责解析和执行 JavaScript 代码。
### **3.4 JSIExecutor**
JSIExecutor 是一个 C++ 类，它负责在 JSC 和 RNEventEmitter 之间传递消息。JSIExecutor 将从 JSC 接收到的消息转换为 RNEventEmitter 可以理解的格式，然后将消息发送给 RNEventEmitter。
### **3.5 RCTBridge**
RCTBridge 是一个 C++ 类，它负责在 RNEventEmitter 和 iOS 原生模块之间传递消息。RCTBridge 将从 RNEventEmitter 接收到的消息转换为 iOS 原生模块可以理解的格式，然后将消息发送给 iOS 原生模块。
### **3.6 RNEventEmitter**
RNEventEmitter 是一个 JavaScript 类，它负责在 JS 代码和 iOS 原生模块之间传递消息。RNEventEmitter 提供了多种方法，允许 JavaScript 代码注册事件监听器、触发事件等。
### **3.7 iOS 原生模块**
iOS 原生模块是使用 Objective-C 或 Swift 语言编写的代码，它可以被 RN 代码调用。iOS 原生模块可以访问 iOS 原生 API，实现各种功能。
## **4. 通信示例**
以下是一个简单的 RN 与 iOS 原生通信示例：
```javascript
// RN 代码
const { NativeModules } = require('react-native');
NativeModules.MyNativeModule.greet('John Doe');
// iOS 原生模块代码
@implementation MyNativeModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(greet:(NSString *)name) {
NSLog(@"Hello, %@!", name);
}
@end
在这个示例中，RN 代码调用了 NativeModules.MyNativeModule.greet('John Doe') 方法，这个方法会将 "John Doe" 这个字符串传递给 iOS 原生模块。iOS 原生模块接收到字符串后，会将其打印到控制台。
5. 结语
在本文中，我们对 RN 与 iOS 原生通信机制进行了详细解析，包括通信原理、关键组件和通信示例。希望本文能够帮助你更好地理解 RN 与 iOS 原生通信的工作原理。
