logo头像

小玉的技术博客

React Native封装原生UI组件栏

React Native平台的开发其实本身也是可以让你写纯原生代码并且还可以让你访问原生平台的功能。这是一个比较高级的功能不过官方还是不推荐你在平时开发中使用这样的开发形式。但是如果你具备这样的开发能力,也是还是不错的。特别当在React Native暂时未提供部分原生功能或者模块,那么你可以使用这样的方法进行封装扩展。今天我们就来看一下原生组件的封装扩展方法。
问题来源:项目中要在注册页面显示一张验证码图片,当用户点击验证码图片时,验证码改变。
问题分析:由于RN显示图片主要有两种请查看React-Native正确加载图片的姿势,而且加载的都是固定资源的图片,并不能实现点击图片换一次验证码的需求

一、对原生视图进一步封装

举个栗子,我们要在React-Native上调用ZLYCustomView显示,那我们就得对ZLYCustomView进行一次封装才能被RN调用。原生视图如下

1
2
3
4
5
6
7
8
9
10
@interface ZLYCustomView:UIView
@property (nonatomic, assign) id<VerifyPicCodeViewDelegate>delegate;
@property (nonatomic, copy) RCTDirectEventBlock onGetCookie;
@property (nonatomic, strong) UIImageView * imageView;
@property (nonatomic, strong) NSString * source;
@end
@implementation ZLYCustomView
@end

二、创建RCTViewManager的子类来管理原生视图

原生视图都需要被一个RCTViewManager的子类来创建和管理。
这些管理器在功能上有些类似“视图控制器”,但它们本质上都是单例 - React Native只会为每个管理器创建一个实例。
它们创建原生的视图并提供给RCTUIManager,RCTUIManager则会反过来委托它们在需要的时候去设置和更新视图的属性。RCTViewManager还会代理视图的所有委托,并给JavaScript发回对应的事件。

提供原生视图步骤如下:

首先创建一个子类 —— 命名规范为“视图名称+Manager”. 视图名称可以加上自己的前缀,这里最好避免使用RCT前缀,除非你想给官方pull request
添加RCT_EXPORT_MODULE()标记宏 —— 让模块接口暴露给JavaScript
实现-(UIView *)view方法 —— 创建并返回组件视图
封装属性及传递事件
下面先贴出完整的代码,然后会对属性和事件进行进一步的解说。

ZLYCustomViewManager.h

1
2
3
4
5
#import "ZLYCustomViewManager.h
#import "RCTViewManager.h"
@interface ZLYCustomViewManager : RCTViewManager
@end

ZLYCustomViewManager.m

 #import "ZLYCustomViewManager.h
 #import "RCTBridgeModule.h"
 #import "RCTBridge.h"
 #import "RCTEventDispatcher.h"
@interface ZLYCustomViewManager : RCTViewManager
//  标记宏(必要)
RCT_EXPORT_MODULE()
//  事件的导出,onClickBanner对应view中扩展的属性
RCT_EXPORT_VIEW_PROPERTY(onClickBanner, RCTDirectEventBlock)
//  通过宏RCT_EXPORT_VIEW_PROPERTY完成属性的映射和导出
RCT_EXPORT_VIEW_PROPERTY(autoScrollTimeInterval, CGFloat);
RCT_EXPORT_VIEW_PROPERTY(imageURLStringsGroup, NSArray);
RCT_EXPORT_VIEW_PROPERTY(autoScroll, BOOL);

- (UIView *)view
{
    //  实际组件的具体大小位置由js控制
    ZLYCustomView *customView = [ZLYCustomView alloc]init];
    return customView;
}
@end
支付宝打赏 微信打赏

赞赏是不耍流氓的鼓励