在 React Native 0.74 新架構(gòu)下，iOS 開發(fā)人員需要從傳統(tǒng)的 RCTBridgeModule 遷移到 TurboModules 和 JSI 通信方式。下面是詳細(xì)的步驟撰筷，指導(dǎo) iOS 開發(fā)人員如何在新架構(gòu)下實(shí)現(xiàn)與 React Native 通信。每一步都盡可能詳細(xì)即舌，以便 iOS 開發(fā)人員無需了解太多 React Native 的細(xì)節(jié)也能完成遷移啦粹。
1. 概覽
在舊版本中，iOS 和 React Native 之間的通信是通過 RCTBridgeModule 實(shí)現(xiàn)的枝誊。這種方式是異步的况芒，使用了 React Native 的橋接機(jī)制。現(xiàn)在叶撒，在新架構(gòu)中绝骚，通信主要通過 TurboModules 和 JSI 實(shí)現(xiàn)，它們提供了更高效的通信方式祠够。
2. 初步準(zhǔn)備
2.1 確保項(xiàng)目使用 React Native 0.74 版本
首先压汪，你需要確保你的項(xiàng)目已經(jīng)升級(jí)到 React Native 0.74 版本。如果你的項(xiàng)目還沒有升級(jí)古瓤，建議與負(fù)責(zé) React Native 升級(jí)的團(tuán)隊(duì)配合蛾魄，完成 React Native 的升級(jí)。
2.2 啟用新架構(gòu)
在新架構(gòu)中湿滓，TurboModules 和 Fabric 是核心組成部分滴须。你需要確保新架構(gòu)已在項(xiàng)目中啟用。
步驟：
-
更新
Podfile：
打開項(xiàng)目的ios/Podfile文件叽奥，確保包含以下配置：use_react_native!( :path => config[:reactNativePath], :fabric_enabled => true, :new_architecture_enabled => true ) -
安裝 CocoaPods 依賴：
在ios目錄中扔水，運(yùn)行以下命令來安裝依賴：cd ios pod install -
構(gòu)建項(xiàng)目：
確保項(xiàng)目可以正常構(gòu)建并運(yùn)行：cd .. yarn ios
3. 編寫 TurboModule
TurboModule 是替代 RCTBridgeModule 的新方式，用于在新架構(gòu)中實(shí)現(xiàn)原生模塊與 JavaScript 的通信朝氓。
3.1 定義 TurboModule 的接口
TurboModule 的接口定義需要通過 TypeScript 或 Flow 來完成魔市。雖然這部分工作通常由 React Native 開發(fā)人員完成主届，但理解這一步有助于了解后續(xù)步驟。
// MyModuleSpec.ts
import { TurboModule, TurboModuleRegistry } from 'react-native';
export interface Spec extends TurboModule {
openRouter(router: string, parameters: { [key: string]: any }): void;
showHUD(): void;
}
export default TurboModuleRegistry.get<Spec>('MyModule');
3.2 生成代碼（由 RN 開發(fā)人員完成）
React Native 開發(fā)人員會(huì)使用 Codegen 工具生成相應(yīng)的 Objective-C 或 C++ 代碼待德，這些代碼會(huì)被集成到 iOS 項(xiàng)目中君丁。
4. 編寫 iOS 原生代碼
這是 iOS 開發(fā)人員的主要任務(wù)。你需要根據(jù)生成的接口實(shí)現(xiàn) TurboModule 的原生邏輯将宪。
4.1 創(chuàng)建 Objective-C++ 文件
在 ios 目錄中绘闷，創(chuàng)建一個(gè)新的文件夾（例如 MyModule），用于存放 TurboModule 的實(shí)現(xiàn)文件较坛。
4.2 實(shí)現(xiàn) TurboModule 的邏輯
創(chuàng)建一個(gè) MyModule.mm 文件印蔗，并實(shí)現(xiàn) TurboModule 的邏輯。
// MyModule.mm
#import <React/RCTLog.h>
#import <React/RCTViewManager.h>
#import <React/RCTBridgeModule.h>
#import <ReactCommon/RCTTurboModule.h>
@interface MyModule : NSObject <RCTTurboModule>
@end
@implementation MyModule
RCT_EXPORT_MODULE()
- (void)openRouter:(NSString *)router parameters:(NSDictionary *)parameters
{
dispatch_async(dispatch_get_main_queue(), ^{
[[SGRouterManager sharedInstance] openURL:router parameters:parameters];
});
}
- (void)showHUD
{
dispatch_async(dispatch_get_main_queue(), ^{
[SVProgressHUD show];
});
}
@end
-
RCT_EXPORT_MODULE()：用于導(dǎo)出模塊丑勤，使其在 JavaScript 中可用华嘹。 -
RCTTurboModule：這是 TurboModule 的核心協(xié)議，取代了RCTBridgeModule法竞。
4.3 實(shí)現(xiàn)與 JSI 的集成
為了提高通信效率耙厚，你可以選擇實(shí)現(xiàn) JSI 與原生代碼的直接集成。這涉及使用 C++ 實(shí)現(xiàn)部分代碼岔霸。
創(chuàng)建一個(gè) MyModule.cpp 文件：
#include <jsi/jsi.h>
#include <ReactCommon/TurboModuleUtils.h>
#include "MyModuleSpec.h"
using namespace facebook::jsi;
using namespace facebook::react;
class MyModule : public TurboModule {
public:
MyModule(std::shared_ptr<CallInvoker> jsInvoker)
: TurboModule("MyModule", jsInvoker) {}
void openRouter(Runtime& rt, const std::string& router, const Object& parameters) {
// 原生邏輯
dispatch_async(dispatch_get_main_queue(), ^{
[[SGRouterManager sharedInstance] openURL:[NSString stringWithUTF8String:router.c_str()] parameters:RCTConvert<NSDictionary *>(parameters)];
});
}
void showHUD(Runtime& rt) {
// 原生邏輯
dispatch_async(dispatch_get_main_queue(), ^{
[SVProgressHUD show];
});
}
};
這段代碼展示了如何使用 C++ 通過 JSI 直接與 JavaScript 通信颜曾，而不再依賴傳統(tǒng)的橋接方式。
5. 集成與調(diào)試
5.1 將模塊集成到項(xiàng)目中
確保你將所有實(shí)現(xiàn)的代碼集成到 Xcode 項(xiàng)目中秉剑，并確保它們在項(xiàng)目的編譯設(shè)置中是正確的泛豪。
5.2 測試 TurboModule
- 在 Xcode 中運(yùn)行項(xiàng)目，確保模塊能夠被正確調(diào)用侦鹏，并且通信是有效的诡曙。
- 如果遇到問題，檢查 Xcode 控制臺(tái)日志略水，調(diào)試原生代碼與 JavaScript 代碼之間的交互价卤。
6. 總結(jié)與最佳實(shí)踐
- 新架構(gòu)的優(yōu)勢：通過遷移到 TurboModule 和 JSI，你可以享受更高效的通信和更好的性能渊涝，這在高頻交互場景中尤為重要慎璧。
-
漸進(jìn)式遷移：可以逐步將舊的
RCTBridgeModule遷移到 TurboModule，確保每個(gè)模塊的穩(wěn)定性跨释。 - 與 RN 團(tuán)隊(duì)協(xié)作：在遷移過程中胸私，與負(fù)責(zé) React Native 部分的開發(fā)團(tuán)隊(duì)緊密合作，確保接口定義與原生實(shí)現(xiàn)的一致性鳖谈。
