当前位置：首页 > React

react cocoa 实现

2026-01-26 14:23:47React

以下是关于 React Cocoa（React Native 与 Cocoa 结合）的实现方法，分为核心步骤和关键注意事项：

原生模块集成

React Native 允许通过原生模块与 iOS 的 Cocoa 框架交互。创建一个实现 RCTBridgeModule 协议的 Objective-C 类，例如：

#import <React/RCTBridgeModule.h>

@interface MyCocoaModule : NSObject <RCTBridgeModule>
@end

@implementation MyCocoaModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(showAlert:(NSString *)message) {
  dispatch_async(dispatch_get_main_queue(), ^{
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"Cocoa Alert" 
                                                                  message:message 
                                                           preferredStyle:UIAlertControllerStyleAlert];
    [[UIApplication sharedApplication].keyWindow.rootViewController presentViewController:alert animated:YES completion:nil];
  });
}
@end

JavaScript 调用

在 React Native 组件中通过 NativeModules 调用原生方法：

import { NativeModules } from 'react-native';
const { MyCocoaModule } = NativeModules;

function App() {
  const showNativeAlert = () => MyCocoaModule.showAlert("Hello from React!");
  return <Button title="Trigger Cocoa" onPress={showNativeAlert} />;
}

视图组件封装

创建自定义原生视图需继承 RCTViewManager，并通过 RCT_EXPORT_VIEW_PROPERTY 暴露属性：

#import <React/RCTViewManager.h>

@interface MyCocoaViewManager : RCTViewManager
@end

@implementation MyCocoaViewManager

RCT_EXPORT_MODULE(MyCocoaView)

- (UIView *)view {
  return [[UIView alloc] init]; // 替换为实际 Cocoa 视图
}

RCT_EXPORT_VIEW_PROPERTY(onTap, RCTBubblingEventBlock)
@end

线程处理

所有原生模块方法默认在非主线程执行，涉及 UI 操作需手动切换到主线程：

dispatch_async(dispatch_get_main_queue(), ^{
  // 更新 UI 的代码
});

数据类型映射

注意 JavaScript 与原生类型转换规则：

字符串：NSString ↔ string
数字：NSNumber ↔ number
数组：NSArray ↔ Array
字典：NSDictionary ↔ Object
回调函数：RCTResponseSenderBlock ↔ function

调试与链接

确保 Xcode 项目正确链接 React Native 库，检查 Header Search Paths 包含 $(SRCROOT)/../node_modules/react-native/React。通过 console.log(NativeModules) 可验证模块是否已注册。