本文旨在讲解ReactNative中的图片下载过程：

• 取消当前的下载，
• 下载前先执行onLoadStart回调，
• 生成下载过程的回调，
• 下载图片，
• 下载结束后的回调。

可以看到下载过程并不复杂，思想都是相通的，只不过Facebook面向的是全世界的开发者，遇到的问题或要满足的需求也是世界范围内的，
所以其对细节方面的处理相当到位，特别是对线程的关注，错误处理，总之每一处都值得回味，这也是我想读源码的原因之一。
文末附有本文说到的全部源码，如想直接看源码可翻至最后。

1、取消当前正在下载的图片

- (void)cancelImageLoad
{
  RCTImageLoaderCancellationBlock previousCancellationBlock = _reloadImageCancellationBlock;
  if(previousCancellationBlock) {
   previousCancellationBlock();
    _reloadImageCancellationBlock = nil;
  }
}

2、执行图片下载前的回调

    if(_onLoadStart) {
      _onLoadStart(nil);
   }

3、生成图片调用过程中的回调，原生会传两个参数给JS端，loaded和total

用于显示下载进度，其中loaded是当前的下载量，而total是下载总量，如果下载一张2M的图片，那么total就是2M，而loaded会随着下载而变化。

    RCTImageLoaderProgressBlockprogressHandler = nil;
    if(_onProgress) {
      progressHandler = ^(int64_t loaded, int64_t total) {
        _onProgress(@{
          @"loaded": @((double)loaded),
          @"total": @((double)total),
        });
     };
   }

4、执行图片加载，后文会详细分析。

    _reloadImageCancellationBlock= [_bridge.imageLoaderloadImageWithTag:_source.imageURL.absoluteString
                                                                  size:self.bounds.size
                                                                 scale:RCTScreenScale()
                                                            resizeMode:self.contentMode
                                                          progressBlock:progressHandler
                                                        completionBlock:^(NSError *error, UIImage *image) {

Tag：传入了一个NSString的imageURL，
size：当前RCTImageView的大小
scale：屏幕的缩放比例（这种需求都考虑到……），作用就是如果当前屏幕被放大，那么下载下来的图片也会根据屏幕缩放比例来放大。
progressBlock：下载过程的回调函数
completionBlock：下载完成后的回调

注意_reloadImageCancellationBlock返回的是可取消下载的block,这也是一个功能的痛点，取消下载图片。

5、下载完成后的回调

      dispatch_async(dispatch_get_main_queue(), ^{
        RCTImageView*strongSelf = weakSelf;
        if (![source isEqual:strongSelf.source]) {
          // Bail out if source has changed since we startedloading
          return;
       }
        if (image.reactKeyframeAnimation){
          [strongSelf.layer addAnimation:image.reactKeyframeAnimationforKey:@"contents"];
        } else {
          [strongSelf.layer removeAnimationForKey:@"contents"];
          strongSelf.image = image;
       }
        if (error) {
          if (strongSelf->_onError) {
            strongSelf->_onError(@{ @"error":error.localizedDescription});
         }
        } else {
          if (strongSelf->_onLoad) {
            strongSelf->_onLoad(nil);
         }
       }
        if (strongSelf->_onLoadEnd) {
           strongSelf->_onLoadEnd(nil);
       }
     });

下载完成后，先判断下载源有没有更改，如果被更改了，则返回不执行任何操作。

if (![source isEqual:strongSelf.source]) {}

然后是判断是否有没动画要求，有的话就执行动画，没有的话则不执行

        if (image.reactKeyframeAnimation){
          [strongSelf.layer addAnimation:image.reactKeyframeAnimationforKey:@"contents"];
        } else {
          [strongSelf.layer removeAnimationForKey:@"contents"];
          strongSelf.image = image;
       }

接着判断是否下载错误，错误的话执行onError回调，成功地话执行onLoad回调。

        if (error) {
          if (strongSelf->_onError) {
            strongSelf->_onError(@{ @"error":error.localizedDescription});
         }
        } else {
          if (strongSelf->_onLoad) {
            strongSelf->_onLoad(nil);
         }
       }

还有最后一个onLoadEnd不管下载过程成功与否都会执行的回调。

        if (strongSelf->_onLoadEnd) {
           strongSelf->_onLoadEnd(nil);
       }

其实这里的onLoad如果换成onLoadSuccess会好理解一点，官方文档的onLoad和onLoadEnd有疑惑性。

onLoad官方文档.png

官方部分源码

RCTImageView.m

- (void)reloadImage
{
  [selfcancelImageLoad];

  if(_source&& self.frame.size.width> 0&& self.frame.size.height> 0) {
    if(_onLoadStart) {
      _onLoadStart(nil);
   }

    RCTImageLoaderProgressBlockprogressHandler = nil;
    if(_onProgress) {
      progressHandler = ^(int64_t loaded, int64_t total) {
        _onProgress(@{
          @"loaded": @((double)loaded),
          @"total": @((double)total),
        });
     };
   }

    RCTImageSource*source = _source;
    __weakRCTImageView*weakSelf = self;
    _reloadImageCancellationBlock= [_bridge.imageLoaderloadImageWithTag:_source.imageURL.absoluteString
                                                                  size:self.bounds.size
                                                                 scale:RCTScreenScale()
                                                            resizeMode:self.contentMode
                                                          progressBlock:progressHandler
                                                        completionBlock:^(NSError *error, UIImage *image) {
      dispatch_async(dispatch_get_main_queue(), ^{
        RCTImageView*strongSelf = weakSelf;
        if (![source isEqual:strongSelf.source]) {
          // Bail out if source has changed since we startedloading
          return;
       }
        if (image.reactKeyframeAnimation){
          [strongSelf.layer addAnimation:image.reactKeyframeAnimationforKey:@"contents"];
        } else {
          [strongSelf.layer removeAnimationForKey:@"contents"];
          strongSelf.image = image;
       }
        if (error) {
          if (strongSelf->_onError) {
            strongSelf->_onError(@{ @"error":error.localizedDescription});
         }
        } else {
          if (strongSelf->_onLoad) {
            strongSelf->_onLoad(nil);
         }
       }
        if (strongSelf->_onLoadEnd) {
           strongSelf->_onLoadEnd(nil);
       }
     });
   }];
  } else{
    [selfclearImage];
  }
}