扩展iOS的功能

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

一. 新建 WXComponent 的子类

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

.h

  1. #import "WXComponent.h"
  2.  
  3. @interface MyComponent : WXComponent
  4.  
  5. @end

.m

  1. #import "WXDatePickerComponent.h"
  2.  
  3. //原生自定义的UI控件类
  4. @interface WXDatePickerView : UIDatePicker
  5.  
  6. @end
  7.  
  8. @implementation WXDatePickerView
  9.  
  10. @end
  11. @interface WXDatePickerComponent()
  12. @property (nonatomic, strong) WXDatePickerView *datePickerView;
  13. @property (nonatomic, assign) BOOL changeEvent;
  14.  
  15. @end
  16. //component 的.m
  17. @implementation WXDatePickerComponent
  18. - (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
  19. {
  20. if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
  21.  
  22. }
  23. return self;
  24. }
  25. //返回给weex,原生创建的UI控件
  26. - (UIView *)loadView
  27. {
  28. return [[WXDatePickerView alloc] init];
  29. }
  30.  
  31. - (void)viewDidLoad
  32. {
  33. _datePickerView = (WXDatePickerView *)self.view;
  34. _datePickerView.backgroundColor =[UIColor whiteColor];
  35. [_datePickerView setLocale:[[NSLocale alloc]initWithLocaleIdentifier:@"zh_CN"]];
  36. [_datePickerView setTimeZone:[NSTimeZone localTimeZone]];
  37. [_datePickerView setDate:[NSDate date] animated:YES];
  38. [_datePickerView setMaximumDate:[NSDate date]];
  39. [_datePickerView setDatePickerMode:UIDatePickerModeDate];
  40. [_datePickerView addTarget:self action:@selector(datePickerValueChanged:) forControlEvents:UIControlEventValueChanged];
  41.  
  42. }
  43. - (void)datePickerValueChanged:(UIDatePicker *)datePicker{
  44. if (_changeEvent) {
  45. [self fireEvent:@"change" params:@{@"value":datePicker.date} domChanges:@{@"attrs": @{@"checked": datePicker.date}}];
  46. }
  47. }

二. 注册

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

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

weex 自定义Component的更多相关文章

  1. Ionic2学习笔记(2):自定义Component

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5536298.html                     上一篇提到,Ionic2提供了很多Co ...

  2. weex 自定义Modul

    扩展iOS的功能 一. 新建 NSOjbect 子类, 并遵循协议<WXModuleProtocol> .h 代码 #import <Foundation/Foundation.h& ...

  3. #Weex与Android交互(一)

    用Weex开发Android程序 参考:开发HelloWorld程序(Weex开发) 1.创建Android工程 2.集成WeexSDK,参考[WEEX SDK 集成到 Android 工程](htt ...

  4. 第八章 交互技术,8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障(作者:鬼道)

    8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障 前言 Native 开发的诸多亮点中,流畅体验和系统调用是最多被提及的.流畅体验体现在页面滚动/动画的流畅性,背后是更好的内存管理和更接近 ...

  5. salesforce lightning零基础学习(四) 事件(component events)简单介绍

    lightning component基于事件驱动模型来处理用户界面的交互.这种事件驱动模型和js的事件驱动模型也很相似,可以简单的理解成四部分: 1.事件源:产生事件的地方,可以是页面中的输入框,按 ...

  6. 创建自定义的 Angular Schematics

    本文对 Angular Schematics 进行了介绍,并创建了一个用于创建自定义 Component 的 Schematics ,然后在 Angular 项目中以它为模板演练了通过 Schemat ...

  7. Weex与Android交互(二)

    扩展Android Weex 提供了扩展机制,可以根据自己的业务进行定制自己的功能. 主要分为两类扩展: Module 扩展 非UI的特定功能.例如sendHttp.openURL 等. Compon ...

  8. Angular(二) - 组件Component

    1. 组件Component示例 2. Component常用的几个选项 3. Component全部的选项 3.1 继承自@Directive装饰器的选项 3.2 @Component自己特有的选项 ...

  9. 「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之自定义组件(四)

    基于Vue和Quasar的前端SPA项目实战之序列号(四) 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之布局菜单(三)的介绍,我们已经完成了布局菜单,本文主要介绍序列号功能的实 ...

随机推荐

  1. spring与mybatis五种整合方法

    1.采用数据映射器(MapperFactoryBean)的方式 不用写mybatis映射文件,采用注解方式提供相应的sql语句和输入参数.  (1)Spring配置文件: <!-- 引入jdbc ...

  2. Part3_lesson1---ARM汇编编程概述

    bootloader以及内核需要使用汇编语言,特别是在初始化的时候!以及在效率要求很高的地方会使用. 汇编程序框架: 其入口在_start处,这个入口需要用一个关键字为.global来声明它是一个全局 ...

  3. [GO]断言

    使用if实现断言 package main import "fmt" type Student struct { name string id int } func main() ...

  4. k8s启动Pod遇到CrashLoopBackOff的解决方法

    1.用kubectl get pod 当看到上面的状态后执行第2步 2.查看pod详情 [root@cc hzb]# kubectl describe pod ceph-mysql-hzb-pod 找 ...

  5. python切片、列表解析、元组

    1.列表解析 test = [x**2 for x in range(1,11)] 2.切片 test1 = ["a","b","c",&q ...

  6. 2015-08-13T17:39:15

    ACTION里 Date upateTime; 有setter getter 页面字符串 是'2015-08-13T17:39:15' 该字符串可以直接映射成Date .

  7. MinGW-编译器

    MinGW 是Minimalist GNUfor Windows的缩写. 它是一个可自由使用和自由发布的Windows特定头文件和使用GNU工具集导入库的集合,允许你在GNU/Linux和Window ...

  8. POJ 3581 Sequence(后缀数组)

    Description Given a sequence, {A1, A2, ..., An} which is guaranteed A1 > A2, ..., An,  you are to ...

  9. Maven整理笔记の安装及配置

      第一部分:在Windows上安装Maven    检查JDK的安装 在安装Maven之前,首先确认你已经正确安装了JDK.Maven可以运行在JDK1.4及以上版本.先打开Windows命令,运行 ...

  10. Java50道经典习题-程序1 不死神兔

    题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子对数为多少? 分析:假如:1月1日有1对兔子,根据题目“从出生后 ...