一.2种module
1.源生API模块 - RCTModuleData: 阐述了JS是如何调用native各个模块的逻辑
2.源生UI组件模块 - RCTComponentData：阐述了JS是如何创建出native的UI界面
二 举例使用
API 模块 例子
.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
@interface OCModelParam : NSObject<RCTBridgeModule>
@end
.m
#import "OCModelParam.h"
@implementation OCModelParam
//暴露给React 使用
RCT_EXPORT_MODULE()
RCT_EXPORT_METHOD(reactParam:(NSString *)param)
{
RCTLogInfo(@"%@", param);
}
@end
UI组件模块
.h
#import <UIKit/UIKit.h>
#import <React/RCTComponent.h>
#import <React/UIView+React.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTViewManager.h>
#import "OCView.h"
@interface OCViewManager : RCTViewManager
@end
.m
#import "OCViewManager.h"
@implementation OCViewManager
RCT_EXPORT_MODULE()
- (UIView *)view{
OCView *view = [[OCView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
return view;
}
@end
三 UI模块使用
EC0C4978-4E25-4BF4-A425-C5A3B3E3683F.png
四 坑
注定不可能以单一RCTRootView去实现整个APP功能,所以
1.大部分保留现有native功能
2.个别动态性较强的新功能采用ReactNative去开发
