ReactNative iOS源码解析（三）

一.2种module

1.源生API模块 - RCTModuleData: 阐述了JS是如何调用native各个模块的逻辑
2.源生UI组件模块 - RCTComponentData：阐述了JS是如何创建出native的UI界面

二 举例使用

API 模块 例子

.h
#import 
#import 
#import 

@interface OCModelParam : NSObject

@end

.m
#import "OCModelParam.h"

@implementation OCModelParam
//暴露给React 使用
RCT_EXPORT_MODULE()

RCT_EXPORT_METHOD(reactParam:(NSString *)param)
{
  RCTLogInfo(@"%@", param);
}
@end

UI组件模块

.h
#import 
#import 
#import 
#import 
#import 
#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去开发