React Native Image 组件加载图片的3种方式

Image 组件加载图片有以下三种方式

1. require 相对路径的方式加载，注意 require 里不能有变量，否则报错，它只支持加载确切路径的图片
   <Image source={require(‘./img/icon.jpg’)}/>

2. 使用 url 加载网上图片资源
   <Image source={{uri: ‘http:..........jpg’}}/>

3. 加载原生目录下 rnimage 文件夹下的图片资源
   path 是图片文件的绝对路径
   注意：path 必需是以 .jpg 或 .png 图片格式结尾的，否则 Image 组件无法加载
   <Image source={{uri: ‘file://’ + path}}/>

以下是 Image 组件加载 iOS 原生缓存图片的示例

iOS 端用 SDWebImageDownloader 下载图片，用 SDImageCache 缓存图片，缓存成功后返回图片 uri 给 iOS 端

[[SDWebImageDownloader sharedDownloader] downloadImageWithURL:[NSURL URLWithString:@“https://tva1.sinaimg.cn/large/6f8a2832gy1g8ph7fs6cdj22yo1o0kju.jpg"]
                                                        completed:^(UIImage * _Nullable image, NSData * _Nullable data, NSError * _Nullable error, BOOL finished) {
        if (finished) {
            NSString *fileType;
            
            /// !!! 这里需要判断图片格式，并把格式拼接在 key 后面，否则缓存在沙盒中的图片是没有图片格式的，这会导致 RN 的 Image 组件无法通过绝对路径加载图片
            SDImageFormat imageFormat = [NSData sd_imageFormatForImageData:data];
            if (imageFormat == SDImageFormatJPEG) {
                fileType = @".jpg";
            } else if (imageFormat == SDImageFormatPNG) {
                fileType = @".png";
            }
            
            __block NSString *key = [NSString stringWithFormat:@"shop_image_%@%@", [NSDate currentTimestamp], fileType];
            [[SDImageCache sharedImageCache] storeImage:image imageData:data forKey:key toDisk:YES completion:^{
                // 缓存成功后，通过 key 去拿到图片的绝对路径
                NSString *path = [[SDImageCache sharedImageCache] cachePathForKey:key];
                if (completeHandler) completeHandler(YES, path);
            }];
        } else {
            NSLog(@"下载出错");
        }
    }];

RN 端
<Image style={{width: 375, height: 200}} source={{uri: ‘file://' + this.state.imagePath}}/>