封装IOS原生组件——导出组件事件到RN端使用_封装ios原生组件—

本文链接：https://blog.csdn.net/qq_33721382/article/details/89208433

本文详细介绍了如何将iOS原生组件的事件导出到React Native（RN）端：首先在iOS组件头文件声明事件属性，然后在RN组件桥接类中导出该属性，接着在iOS端通过事件属性发送事件到RN，最后在RN端封装并处理这些事件。通过实例展示了在iOS组件上添加按钮并触发RN事件的过程。

摘要由CSDN通过智能技术生成

导出IOS原生组件的事件到RN端的步骤。

1、在IOS组件的头文件声明一个事件属性。

2、在RN组件桥接类里面导出这个事件属性。

3、在IOS原生端通过定义的事件属性发送事件到RN端。

4、在RN端封装IOS原生组件事件。

1、在IOS组件的头文件声明一个事件属性

TestReactNativeView.h

//
//  TestReactNativeView.h
//  NativeCommunicationDemo
//
//  Created by chenlw on 2019/4/10.
//  Copyright © 2019 Facebook. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "React/RCTComponent.h"

NS_ASSUME_NONNULL_BEGIN

@interface TestReactNativeView : UIView
// type操作类型
@property(nonatomic,weak) NSString * type;

//如果使用assign会导致线程锁死，使用weak弱引用就没有问题
//@property(nonatomic,assign) UITextView *textView;
@property(nonatomic,weak) UITextView *textView;

// 声明一个事件属性，导出给RN端使用
@property(nonatomic, copy) RCTBubblingEventBlock onFaceDetection;

@end

NS_ASSUME_NONNULL_END

2、在RN组件桥接类导出这个事件属性

TestReactNativeViewManager.m

//
//  TestReactNativeViewManager.m
//  NativeCommunicationDemo
//
//  Created by chenlw on 2019/4/10.
//  Copyright © 2019 Facebook. All rights reserved.
//

#import "TestReactNativeViewManager.h"
#import "TestReactNativeView.h"

@implementation TestReactNativeViewManager


//导出桥接宏标记
RCT_EXPORT_MODULE()

//导出RN组件的属性
RCT_EXPORT_VIEW_PROPERTY(type, NSString)

//导出RN组件的事件
RCT