weex 自定义Component

扩展iOS的功能

~  Component 与UI控件相关 ,即通过原生方法创建UI界面,返回给weex 使用

一. 新建 WXComponent 的子类

    在子类实现WXComponent 的生命周期方法

.h

#import "WXComponent.h"
 
@interface MyComponent : WXComponent
 
@end

.m

#import "WXDatePickerComponent.h"
 
//原生自定义的UI控件类
@interface WXDatePickerView : UIDatePicker
 
@end
 
@implementation WXDatePickerView
 
@end
@interface WXDatePickerComponent()
@property (nonatomic, strong) WXDatePickerView *datePickerView;
@property (nonatomic, assign) BOOL changeEvent;
 
@end
//component 的.m
@implementation WXDatePickerComponent
- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
{
    if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
 
    }
    return self;
}
//返回给weex,原生创建的UI控件
- (UIView *)loadView
{
    return [[WXDatePickerView alloc] init];
}
 
- (void)viewDidLoad
{
    _datePickerView = (WXDatePickerView *)self.view;
    _datePickerView.backgroundColor =[UIColor whiteColor];
    [_datePickerView setLocale:[[NSLocale alloc]initWithLocaleIdentifier:@"zh_CN"]];
    [_datePickerView setTimeZone:[NSTimeZone localTimeZone]];
    [_datePickerView setDate:[NSDate date] animated:YES];
    [_datePickerView setMaximumDate:[NSDate date]];
    [_datePickerView setDatePickerMode:UIDatePickerModeDate];
    [_datePickerView addTarget:self action:@selector(datePickerValueChanged:) forControlEvents:UIControlEventValueChanged];
 
}
- (void)datePickerValueChanged:(UIDatePicker *)datePicker{
    if (_changeEvent) {
        [self fireEvent:@"change" params:@{@"value":datePicker.date} domChanges:@{@"attrs": @{@"checked": datePicker.date}}];
    }
}

二. 注册

*注意: 自定义的Component的需要在WeexSDK 初始化的时候 注册

[WXSDKEngine registerComponent:@"MyView" withClass:[MyViewComponent class]];