React-Native原生UI交互
react-native 的使用现在越来越广泛，优秀的第三方组件也层出不穷，有纯 JS 的，也有依赖原生组件的，当然，纯 JS 的组件在应用上更为简便，不需要考虑平台，但也有些是纯靠 JS 做不到，则会考虑从原生导出，今天要讲的就是从原生导出 UI 组件。
今天以一个图片轮播 YHCarouselView 组件为例，首先是为自己的学习做一个记录，然后希望能够帮到正在学习的你。
准备工作
图片轮播是以前闲暇之余封装好的一个组件，功能简单，简单易用，支持本地图片和网络图片，链接里有 OC 版本和 Swift 版本。这里先献上本地使用的效果图。
native.gif
导出组件
根据 react-native 的使用文档，导出 UI 组件，原生视图都需要被一个RCTViewManager的子类来创建和管理。这些管理器在功能上有些类似“视图控制器”，但它们本质上都是单例 —— React Native只会为每个管理器创建一个实例。它们创建原生的视图并提供给RCTUIManager，RCTUIManager则会反过来委托它们在需要的时候去设置和更新视图的属性。RCTViewManager还会代理视图的所有委托，并给JavaScript发回对应的事件。摘抄自 React-Native中文网。
导出 UI 组件三步走：
- 创建一个子类
- 添加
RCT_EXPORT_MODULE()标记宏 - 实现
-(UIView *)view方法
创建一个子类
这很好理解，就是创建一个待导出组件（这里的带导出组件就是 YHCarouselView）的子类，这里可以对组件做进一步的封装，特别需要说明的是，如果该组件有回调需要处理，这里即必须用到 RCTDirectEventBlock 或者 RCTBubblingEventBlock，而且命名的时候要特别注意，需要已 on 开头，熟悉 JS 的朋友应该会反应过来，这很像 JS 的事件命名规范。
YHCarouselView 是有两个可选代理回调的，
/**
代理方法，选择当前图片
@param carouselView 轮播视图
@param index 当前图片的索引
*/
- (void)carouselView:(YHCarouselView *)carouselView didSelectedAtIndex:(NSUInteger)index;
/**
* 代理方法，当图片需要下载时需要实现这个代理方法，同事必须给 imageCount 属性赋值
*
* @param carouselView 轮播视图
* @param index 当前展示的图片索引
* @param imageView 当前展示图片的容器
*/
- (void)carouselView:(YHCarouselView *)carouselView didShowAtIndex:(NSUInteger)index imageView:(UIImageView *)imageView;
所以在做进一步封装的时候，需要提供以 on 开头的事件回调。
@interface CarouselView : YHCarouselView
@property (nonatomic, strong) NSString *dotColor;
@property (nonatomic, strong) NSString *dotActiveColor;
@property (nonatomic, strong) NSArray<NSString *> *names;
@property (nonatomic, strong) NSArray<NSString *> *urls;
@property (nonatomic, copy) RCTDirectEventBlock onSelect;
@end
添加 RCT_EXPORT_MODULE()标记宏
在 react-native 的世界里，所有的视图都是交给 RCTViewManager 来管理的，所以我们需要一个 CarouselViewManager 的类来管理 CarouselView，CarouselViewManager 继承自 RCTViewManager， RCTViewManager 实现 RCTBridgeModule 协议。
#define RCT_EXPORT_MODULE(js_name) \
RCT_EXTERN void RCTRegisterModule(Class); \
+ (NSString *)moduleName { return @#js_name; } \
+ (void)load { RCTRegisterModule(self); }
以上是 RCT_EXPORT_MODULE() 的完整定义，可以清楚的看到，该宏做了两件事：
- 定义该组件的名字。
- 注册该
module。
RCT_EXPORT_MODULE可以传入参数，指定该 module 的名字，也可以不传递参数，默认使用该 module 的类名，若 module 名以Manager为后缀，则取后缀后的字符串为名字；若 module 名以RCT或RK为前缀，则会取去前缀后的字符串为名字。+ (void)load： 该方法在内存中只会调用一次，且只会在程序调用期间调用一次。你真的了解 load 方法么?
实现 -(UIView *)view 方法
在 CarouselViewManager 类的 - (UIView *)view 方法里返回视图，这个方法会初始化视图，需要注意的是，如果视图有代理回调，需要在这里处理。
- (UIView *)view {
CarouselView *carouselView = [[CarouselView alloc] init];
carouselView.delegate = self;
return carouselView; }
代理方法如果要暴露到 JS 的话，可以通过上面的 onXxx 属性。
#pragma mark - YHCarouselViewDelegate
- (void)carouselView:(CarouselView *)carouselView didSelectedAtIndex:(NSUInteger)index {
if (carouselView.onSelect) {
carouselView.onSelect(@{@"index": @(index)});
}
}
导出属性
属性分为两种
- 视图已经存在的属性
- 在
ViewManager中自定义的属性
视图已经存在的属性
对于视图已经存在的属性，只需要使用 React 提供的宏 RCT_EXPORT_VIEW_PROPERTY(name, type)，第一个参数是该属性的名字，第二个参数是该属性的类型，这里的类型支持所有标准JSON类型：
- string (NSString)
- number (NSInteger, float, double, CGFloat, NSNumber)
- boolean (BOOL, NSNumber)
- array (NSArray) 包含本列表中任意类型
- object (NSDictionary) 包含string类型的键和本列表中任意类型的值
- function (RCTResponseSenderBlock)
自定义属性
自定义属性相对来说复杂一点，React 同样提供宏 RCT_CUSTOM_VIEW_PROPERTY(name, type, viewClass)，完整的属性定义为
#define RCT_CUSTOM_VIEW_PROPERTY(name, type, viewClass) \
RCT_REMAP_VIEW_PROPERTY(name, __custom__, type) \
- (void)set_##name:(id)json forView:(viewClass *)view withDefaultView:(viewClass *)defaultView
json 代表了JS中传递的尚未解析的原始值。函数里还有一个 view 变量，使得我们可以访问到对应的视图实例
这里需要注意的是 defaultView， 当 JS 传入的是 null 时，即 json 值为空时，defaultView 才不为空，当 defaultView 一次不为空后，后续在传入的数据不管是否有值，都不会为 nil，可以看到 defaultView 上面的视图层次以及视图的属性值，都是最初的默认值。
defaultView.png
在JS中使用组件
在 JS 中使用组件，首先需要让这个视图变成一个可用的React组件:
import { requireNativeComponent } from 'react-native';
// requireNativeComponent 自动把这个组件提供给 "CarouselViewManager"
const CarouselViewNativeComponent = requireNativeComponent("CarouselView", CarouselView);
requireNativeComponent通常具有两个参数，第一个是本地视图的名称，第二个是描述组件接口的对象。组件接口应该声明一个友好的名称在调试消息中使用，并且必须声明本地视图所反映的propTypes。PropTypes用于检查用户使用本地视图的有效性。
对于 native 导出的组件都应该是 iOS 和 Android 相互独立的，在创作阶段，如果对两个平台都很熟悉的话，恭喜您一个人就可以搞定，但如果是像我只熟悉 iOS 平台的话，就需要另外一个熟悉 Android 的小伙伴帮忙了，并且对 JS 暴露的属性名称和方法约定好。
最后附上项目地址以及 React 下的运行效果图。
react.gif
