Shulou(Shulou.com)06/03 Report--

Editor to share with you an example analysis of react-native source image caching problems, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Tested for xcode simulator, rn version 0.44.3

Suddenly want to learn how RN encapsulates UIImage in ios. Look at it and find that the cache problem of the picture is a pit.

First, take a look at the three ways to use pictures on js, and sort them in order 1, 2, and 3.

/ / 1. Load remote pictures / / 2, load pictures in xcode / / 3, load pictures in js

1, 2 must set the width and height of the picture, 3 do not need to set.

The corresponding ios original end file is RCTImageViewManager, which exposes attributes.

RCT_REMAP_VIEW_PROPERTY (source, imageSources, NSArray)

This is the property source of the Image component in js, and setting source in js triggers the setter method of this property. Access to the RCTImageView

-(void) setImageSources: (NSArray *) imageSources {if (! [imageSources isEqual:_imageSources]) {_ imageSources = [imageSources copy]; [self reloadImage];}}

Print the imageSources from the breakpoint by this method, and get the following results in turn:

It can be seen that the Image component loads pictures in the form of URL and treats them as network resources. The difference is the type of URL:

Load pictures on the network: http:// load xcode resources: file:// load js Pictures: http://localhost:8081

Trace the setter method to the following method in RCTImageLoader.m

-(RCTImageLoaderCancellationBlock) loadImageWithURLRequest: (NSURLRequest *) imageURLRequest size: (CGSize) size scale: (CGFloat) scale clipped: (BOOL) clipped resizeMode: (RCTResizeMode) resizeMode progressBlock: (RCTImageLoaderProgressBlock) progressBlock partialLoadBlock: (RCTImageLoaderPartialLoadBlock) partialLoadBlock completionBlock: (RCTImageLoaderCompletionBlock) completionBlock {_ block volatile uint32_t cancelled = 0; _ _ block dispatch_block_t cancelLoad = nil Dispatch_block_t cancellationBlock = ^ {dispatch_block_t cancelLoadLocal = cancelLoad; if (cancelLoadLocal & &! cancelled) {cancelLoadLocal ();} OSAtomicOr32Barrier (1, & cancelled);}; / / callback _ _ weak RCTImageLoader * weakSelf = self; void (^ completionHandler) (NSError *, id, BOOL, NSString *) = ^ (NSError * error, id imageOrData, BOOL cacheResult, NSString * fetchDate) {_ typeof (self) strongSelf = weakSelf; if (cancelled | |! strongSelf) {return } / / if imageOrData is an image type, call back / / here directly. In the second case, it will be satisfied. For other cases, continue with the following method: if (! imageOrData | | [imageOrData isKindOfClass: [UIImage class]]) {cancelLoad = nil; completionBlock (error, imageOrData); return } / / check whether the bytecode corresponding to the url exists in memory if (cacheResult) {UIImage * image = [[strongSelf imageCache] imageForUrl:imageURLRequest.URL.absoluteString size:size scale:scale resizeMode:resizeMode responseDate:fetchDate]; if (image) {cancelLoad = nil; completionBlock (nil, image); return }} / / if there is no cache, extract the image, and cache the decompressed image block RCTImageLoaderCompletionBlock decodeCompletionHandler = ^ (NSError * error_, UIImage * image) {if (cacheResult & & image) {/ / Store decoded image in cache [[strongSelf imageCache] addImageToCache:image URL:imageURLRequest.URL.absoluteString size:size scale:scale resizeMode:resizeMode responseDate:fetchDate];} cancelLoad = nil CompletionBlock (error_, image);}; / / specific decompression process cancelLoad = [strongSelf decodeImageData:imageOrData size:size scale:scale clipped:clipped resizeMode:resizeMode completionBlock:decodeCompletionHandler];} / / load the pictures in a specific way. 1 or 3 cases use network request to download, 2 cases load the local file cancelLoad = [self _ loadImageOrDataWithURLRequest:imageURLRequest size:size scale:scale resizeMode:resizeMode progressBlock:progressBlock partialLoadBlock:partialLoadBlock completionBlock:completionHandler]; return cancellationBlock;}

The specific cache class is RCTImageCache, which uses NSCache cache and method.

-(void) addImageToCache: (UIImage *) image forKey: (NSString *) cacheKey {if (! image) {return;} CGFloat bytes = image.size.width * image.size.height * image.scale * image.scale * 4; if (bytes _ decodedImageCache setObject:image forKey:cacheKey cost:bytes];}}

RCTMaxCachableDecodedImageSizeInBytes is a constant, which is 1048576, that is, only images smaller than 1MB are cached.

The problem lies in cacheKey, the way to view cached key

Static NSString * RCTCacheKeyForImage (NSString * imageTag, CGSize size, CGFloat scale, RCTResizeMode resizeMode, NSString * responseDate) {return [NSString stringWithFormat:@ "% @ |% g |% zd |% @", imageTag, size.width, size.height, scale, resizeMode, responseDate];}

The generation method of cache key contains that responseDate,responseDate is returned when a network request is made.

The copy code is as follows:

ResponseDate = (NSHTTPURLResponse *) response) .allHeaderFields [@ "Date"]

1 and 3 each load is a network request, then the time of the network request always changes, so the responseDate is changed, and the cacheKey is not unique, so although the system does the image cache, it takes out nil each time, and the cache is invalid.

2. Load a specific method in RCTLocalAssetImageLoader.m, which calls the RCTImageFromLocalAssetURL method of RCTUtils

UIImage * _ nullable RCTImageFromLocalAssetURL (NSURL * imageURL) {/ /. Omit various processing UIImage * image = nil; if (bundle) {image = [UIImage imageNamed:imageName inBundle:bundle compatibleWithTraitCollection:nil];} else {image = [UIImage imageNamed:imageName];} / /. Omit various processing return image;}

It can be seen that the image that comes with xcode is loaded in the way of [UIImage imageNamed:imageName], which is cached in memory.

To sum up, load the react-native image

In case 1 and 3, there is no memory cache

2 in the case of the system default memory cache

There is no disk cache in all cases.

For the in-memory cache to take effect, you only need to change the generation rules of cacheKey.

Add: images and files larger than a certain value (test is about 5kb) will be cached on disk in the bunderId / fsCachedData folder of the Library/Caches/ project below sandboxie, which is automatically generated by NSURLCache, the default cache class of the NSURLSession network request system, and is not a disk cache of images.

The above is all the contents of this article entitled "sample Analysis of react-native Source Image caching problems". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.