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]];