简单时序图
注：为了便于理解，把 RCTImageLoader 的几个方法当做独立对象对待了（用方框框出来的是三个 RCTImageLoader 对象方法）。
RCTImage_Sequence_Diagram.jpg
本文是基于 react-native 0.37.0 版本进行分析的。
RCTImageView
- 1、初始化
- (instancetype)initWithBridge:(RCTBridge *)bridge NS_DESIGNATED_INITIALIZER;
- 2、通过 setProps(这个 props 就是我们在 JS 里为 <Image> 标签设定的属性值，其中就包括 URI) 调到了setResizeMode:
- (void)setResizeMode:(RCTResizeMode)resizeMode
- 3、setResizeMode: 调到了 reloadImage
- (void)reloadImage
- 4、reloadImage 先做了两件事：1、cancelImageLoad。2、imageSourceForSize。
- (void)cancelImageLoad
- cancelImageLoad里如果有之前保存的 _reloadImageCancellationBlock，则执行该 block，并且置为 nil，同时将 _pendingImageSource 置为 nil。
- imageSourceForSize，如果传进来的 size 是(0,0)，直接返回 nil，如果不是，则找一个最合适的 RCTImageSource。
- 然后 reloadImage 如果获取到了合适的 RCTImageSource 则进入下载流程，否则 clearImage。
if (source && self.frame.size.width > 0 && self.frame.size.height > 0) {
// 篇幅原因隐藏了接下来要讲的代码
}
- 定义了三个回调：progressHandler、partialLoadHandler、completionHandler，用于下载进度、部分下载、下载完成调用。将三个 block 作为参数和 source、size、resizeMode 一起通过 imageLoader 的 loadImageVithURLRequest：传递给 imageLoader。并且用 _reloadImageCancellationBlock 接收该方法的返回值(上面提到的 cancelImageLoad 里调用的就是这个 block)
RCTImageLoaderProgressBlock progressHandler
RCTImageLoaderPartialLoadBlock partialLoadHandler
RCTImageLoaderCompletionBlock completionHandler
_reloadImageCancellationBlock =
[_bridge.imageLoader loadImageWithURLRequest:source.request
size:imageSize
scale:imageScale
clipped:NO
resizeMode:_resizeMode
progressBlock:progressHandler
partialLoadBlock:partialLoadHandler
completionBlock:completionHandler];
注：这里还不知道我们要加载的图片是来自网络还是来自本地(这里是 RN 所有图片的入口)。
RCTImageLoader
- 5、loadImageWithURLRequest：先定义一个 cancelLoad 回调用于接收 _loadImageOrDataWithURLRequest: 或 decodeImageData: 的返回值。 cancellationBlock 返回给调用方，再定义一个 completionHandler 传递给 _loadImageOrDataWithURLRequest:
__block dispatch_block_t cancelLoad
dispatch_block_t cancellationBlock
void (^completionHandler)(NSError *, id, BOOL, NSString *)
- cancellationBlock 里调用了上面定义的 cancelLoad 回调，并且在线程锁内修改表示变量 cancelled 的值。
- completionHandler 里先判断是否被取消或者 self 有没有被释放，然后判断如果 imageData为nil 或者 imageData 已经是 UIImage 类型就直接回调给调用方并且return。completionHandler 接受 4 个参数：
^(NSError *error, id imageOrData, BOOL cacheResult, NSString *fetchDate) {}
- cacheResult 是 _loadImageOrDataWithURLRequest: 回传过来的表示图片(本地图片)是否有缓存，如果有则查找缓存并对调给调用方并且return，没有则定义一个 decodeCompletionHandler 并且执行 decodeImageData(后文再讲)，用刚才定义的 cancelLoad 接收返回值。
cancelLoad = [self _loadImageOrDataWithURLRequest:imageURLRequest
size:size
scale:scale
resizeMode:resizeMode
progressBlock:progressBlock
partialLoadBlock:partialLoadBlock
completionBlock:completionHandler];
- 6、_loadImageOrDataWithURLRequest 是一个 返回值为 RCTImageLoaderCancellationBlock 的方法。
- _loadImageOrDataWithURLRequest，先根据 URL 通过 imageURLLoaderForURL: 查找最合适的 id<RCTImageURLLoader> loadHandler (loadHandler 为本地图片加载器，后文讲它是怎么来的)，然后也定义了一个 completionHandler，这个 block 接收3个参数：error、imageOrData、fetchDate，在 completionHandler 里判断如果当前线程为主线程并且 imageData 不是 UIImage 类型则扔到全局队列里回调给调用方(即loadImageWithURLRequest:方法的 completionHandler)，否则直接回调给调用方。
id<RCTImageURLLoader> loadHandler = [self imageURLLoaderForURL:request.URL];
void (^completionHandler)(NSError *, id, NSString *)
- 7、接下来开始加载图片，如果有 loadHandler 则执行本地图片加载，否则执行网络下载。
if (loadHandler) {
cancelLoad = [loadHandler loadImageForURL:request.URL
size:size
scale:scale
resizeMode:resizeMode
progressHandler:progressHandler
partialLoadHandler:partialLoadHandler
completionHandler:^(NSError *error, UIImage *image) {
completionHandler(error, image, nil);
}];
} else {
// Use networking module to load image
cancelLoad = [strongSelf _loadURLRequest:request
progressBlock:progressHandler
completionBlock:completionHandler];
}
- 8、看网络图片加载部分，先定义一个
RCTURLRequestCompletionBlock processResponse
它接收三个参数：
^(NSURLResponse *response, NSData *data, NSError *error)
processResponse 里面判断网络状态码并且把 data 回调给调用方(_loadImageOrDataWithURLRequest)，然后 RCTNetworking 开始网络请求图片。下载完成后就开始了层层回调。
- 一直回调到步骤 5 这里执行 decodeImageData:
- 9、completionHandler，先定义一个 completionHandler 接受两个参数(error,image)并且在非主线程队列回调给调用方，然后去查找一个(本地)图片 decoder，如果没有则在 _URLRequestQueue 队列里进行解码，解码完成 completionHandler(error,image)。
- 现在回到步骤 7，看下 loadHandler 是个什么鬼。
// Find suitable image URL loader
id<RCTImageURLLoader> loadHandler = [self imageURLLoaderForURL:request.URL];
可以看到 loadHandler 是这么来的，进去 imageURLLoaderForURL: 方法里发现 loadHandler 是从一个 _loaders 的数组里挑选出来的，_loaders 数组是怎么来的呢，继续看代码：
_loaders = [[_bridge modulesConformingToProtocol:@protocol(RCTImageURLLoader)] sortedArrayUsingComparator:^NSComparisonResult(id<RCTImageURLLoader> a, id<RCTImageURLLoader> b) {
float priorityA = [a respondsToSelector:@selector(loaderPriority)] ? [a loaderPriority] : 0;
float priorityB = [b respondsToSelector:@selector(loaderPriority)] ? [b loaderPriority] : 0;
if (priorityA > priorityB) {
return NSOrderedAscending;
} else if (priorityA < priorityB) {
return NSOrderedDescending;
} else {
return NSOrderedSame;
}
}];
关键代码：
[_bridge modulesConformingToProtocol:@protocol(RCTImageURLLoader)]
继续往里跟：
- (NSArray *)modulesConformingToProtocol:(Protocol *)protocol
{
NSMutableArray *modules = [NSMutableArray new];
for (Class moduleClass in self.moduleClasses) {
if ([moduleClass conformsToProtocol:protocol]) {
id module = [self moduleForClass:moduleClass];
if (module) {
[modules addObject:module];
}
}
}
return [modules copy];
}
画重点：conformsToProtocol: 方法是检查某个对象以及它的祖先有没有实现某个方法。self.moduleClasses 是个什么东西呢，它是所有遵守了 RCTBridgeModule 协议及 RCTBridgeModule 子孙协议的 Class 的集合。这个集合里面遵守了 RCTImageURLLoader 协议的有两个 RCTLocalAssetImageLoader 和 RCTPhotoLibraryImageLoader。
网友评论