From 4a7cd64f5b0aa40b04d63ccb105ee2b511abe624 Mon Sep 17 00:00:00 2001 From: DreamPiggy Date: Fri, 17 Jul 2020 13:27:57 +0800 Subject: [PATCH] feat(ios): allow for for per-image-request-headers (#691) * Bump the dependency of SDWebImage into 5.8+ because of the SDWebImageDownloaderRequestModifier convenient API usage * Fix the implementation on iOS for per-image-request-header-setup. Should not use `SDWebImageDownloader` which manage the global shared headers. Use the context option of request modifier. * Add the support for data:image URL for WebP images * Alaways bypass invalid SSL certificate error, same behavior like React-Native itself * Fix the implementation of request modifier on SDWebImage, which have bugs on 5.8.0 (will fix in 5.8.1), revert the dependency bump * Revert the changes to bypass SSL error * Remove the unused Podfile.lock changes --- .gitignore | 4 + ReactNativeFastImageExample/ios/Podfile.lock | 409 ------------------- ios/FastImage/FFFastImageView.m | 20 +- 3 files changed, 19 insertions(+), 414 deletions(-) delete mode 100644 ReactNativeFastImageExample/ios/Podfile.lock diff --git a/.gitignore b/.gitignore index afbe91a..0c43f2c 100644 --- a/.gitignore +++ b/.gitignore @@ -22,6 +22,10 @@ DerivedData *.xcuserstate project.xcworkspace +# CocoaPods +Podfile.lock +Pods + # Android/IJ # .idea diff --git a/ReactNativeFastImageExample/ios/Podfile.lock b/ReactNativeFastImageExample/ios/Podfile.lock deleted file mode 100644 index ca5e305..0000000 --- a/ReactNativeFastImageExample/ios/Podfile.lock +++ /dev/null @@ -1,409 +0,0 @@ -PODS: - - boost-for-react-native (1.63.0) - - DoubleConversion (1.1.6) - - FBLazyVector (0.61.5) - - FBReactNativeSpec (0.61.5): - - Folly (= 2018.10.22.00) - - RCTRequired (= 0.61.5) - - RCTTypeSafety (= 0.61.5) - - React-Core (= 0.61.5) - - React-jsi (= 0.61.5) - - ReactCommon/turbomodule/core (= 0.61.5) - - Folly (2018.10.22.00): - - boost-for-react-native - - DoubleConversion - - Folly/Default (= 2018.10.22.00) - - glog - - Folly/Default (2018.10.22.00): - - boost-for-react-native - - DoubleConversion - - glog - - glog (0.3.5) - - libwebp (1.1.0): - - libwebp/demux (= 1.1.0) - - libwebp/mux (= 1.1.0) - - libwebp/webp (= 1.1.0) - - libwebp/demux (1.1.0): - - libwebp/webp - - libwebp/mux (1.1.0): - - libwebp/demux - - libwebp/webp (1.1.0) - - RCTRequired (0.61.5) - - RCTTypeSafety (0.61.5): - - FBLazyVector (= 0.61.5) - - Folly (= 2018.10.22.00) - - RCTRequired (= 0.61.5) - - React-Core (= 0.61.5) - - React (0.61.5): - - React-Core (= 0.61.5) - - React-Core/DevSupport (= 0.61.5) - - React-Core/RCTWebSocket (= 0.61.5) - - React-RCTActionSheet (= 0.61.5) - - React-RCTAnimation (= 0.61.5) - - React-RCTBlob (= 0.61.5) - - React-RCTImage (= 0.61.5) - - React-RCTLinking (= 0.61.5) - - React-RCTNetwork (= 0.61.5) - - React-RCTSettings (= 0.61.5) - - React-RCTText (= 0.61.5) - - React-RCTVibration (= 0.61.5) - - React-Core (0.61.5): - - Folly (= 2018.10.22.00) - - glog - - React-Core/Default (= 0.61.5) - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsiexecutor (= 0.61.5) - - Yoga - - React-Core/CoreModulesHeaders (0.61.5): - - Folly (= 2018.10.22.00) - - glog - - React-Core/Default - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsiexecutor (= 0.61.5) - - Yoga - - React-Core/Default (0.61.5): - - Folly (= 2018.10.22.00) - - glog - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsiexecutor (= 0.61.5) - - Yoga - - React-Core/DevSupport (0.61.5): - - Folly (= 2018.10.22.00) - - glog - - React-Core/Default (= 0.61.5) - - React-Core/RCTWebSocket (= 0.61.5) - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsiexecutor (= 0.61.5) - - React-jsinspector (= 0.61.5) - - Yoga - - React-Core/RCTActionSheetHeaders (0.61.5): - - Folly (= 2018.10.22.00) - - glog - - React-Core/Default - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsiexecutor (= 0.61.5) - - Yoga - - React-Core/RCTAnimationHeaders (0.61.5): - - Folly (= 2018.10.22.00) - - glog - - React-Core/Default - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsiexecutor (= 0.61.5) - - Yoga - - React-Core/RCTBlobHeaders (0.61.5): - - Folly (= 2018.10.22.00) - - glog - - React-Core/Default - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsiexecutor (= 0.61.5) - - Yoga - - React-Core/RCTImageHeaders (0.61.5): - - Folly (= 2018.10.22.00) - - glog - - React-Core/Default - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsiexecutor (= 0.61.5) - - Yoga - - React-Core/RCTLinkingHeaders (0.61.5): - - Folly (= 2018.10.22.00) - - glog - - React-Core/Default - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsiexecutor (= 0.61.5) - - Yoga - - React-Core/RCTNetworkHeaders (0.61.5): - - Folly (= 2018.10.22.00) - - glog - - React-Core/Default - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsiexecutor (= 0.61.5) - - Yoga - - React-Core/RCTSettingsHeaders (0.61.5): - - Folly (= 2018.10.22.00) - - glog - - React-Core/Default - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsiexecutor (= 0.61.5) - - Yoga - - React-Core/RCTTextHeaders (0.61.5): - - Folly (= 2018.10.22.00) - - glog - - React-Core/Default - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsiexecutor (= 0.61.5) - - Yoga - - React-Core/RCTVibrationHeaders (0.61.5): - - Folly (= 2018.10.22.00) - - glog - - React-Core/Default - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsiexecutor (= 0.61.5) - - Yoga - - React-Core/RCTWebSocket (0.61.5): - - Folly (= 2018.10.22.00) - - glog - - React-Core/Default (= 0.61.5) - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsiexecutor (= 0.61.5) - - Yoga - - React-CoreModules (0.61.5): - - FBReactNativeSpec (= 0.61.5) - - Folly (= 2018.10.22.00) - - RCTTypeSafety (= 0.61.5) - - React-Core/CoreModulesHeaders (= 0.61.5) - - React-RCTImage (= 0.61.5) - - ReactCommon/turbomodule/core (= 0.61.5) - - React-cxxreact (0.61.5): - - boost-for-react-native (= 1.63.0) - - DoubleConversion - - Folly (= 2018.10.22.00) - - glog - - React-jsinspector (= 0.61.5) - - React-jsi (0.61.5): - - boost-for-react-native (= 1.63.0) - - DoubleConversion - - Folly (= 2018.10.22.00) - - glog - - React-jsi/Default (= 0.61.5) - - React-jsi/Default (0.61.5): - - boost-for-react-native (= 1.63.0) - - DoubleConversion - - Folly (= 2018.10.22.00) - - glog - - React-jsiexecutor (0.61.5): - - DoubleConversion - - Folly (= 2018.10.22.00) - - glog - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - React-jsinspector (0.61.5) - - react-native-image-picker (2.3.1): - - React - - react-native-safe-area-context (0.7.3): - - React - - React-RCTActionSheet (0.61.5): - - React-Core/RCTActionSheetHeaders (= 0.61.5) - - React-RCTAnimation (0.61.5): - - React-Core/RCTAnimationHeaders (= 0.61.5) - - React-RCTBlob (0.61.5): - - React-Core/RCTBlobHeaders (= 0.61.5) - - React-Core/RCTWebSocket (= 0.61.5) - - React-jsi (= 0.61.5) - - React-RCTNetwork (= 0.61.5) - - React-RCTImage (0.61.5): - - React-Core/RCTImageHeaders (= 0.61.5) - - React-RCTNetwork (= 0.61.5) - - React-RCTLinking (0.61.5): - - React-Core/RCTLinkingHeaders (= 0.61.5) - - React-RCTNetwork (0.61.5): - - React-Core/RCTNetworkHeaders (= 0.61.5) - - React-RCTSettings (0.61.5): - - React-Core/RCTSettingsHeaders (= 0.61.5) - - React-RCTText (0.61.5): - - React-Core/RCTTextHeaders (= 0.61.5) - - React-RCTVibration (0.61.5): - - React-Core/RCTVibrationHeaders (= 0.61.5) - - ReactCommon/jscallinvoker (0.61.5): - - DoubleConversion - - Folly (= 2018.10.22.00) - - glog - - React-cxxreact (= 0.61.5) - - ReactCommon/turbomodule/core (0.61.5): - - DoubleConversion - - Folly (= 2018.10.22.00) - - glog - - React-Core (= 0.61.5) - - React-cxxreact (= 0.61.5) - - React-jsi (= 0.61.5) - - ReactCommon/jscallinvoker (= 0.61.5) - - RNCMaskedView (0.1.7): - - React - - RNFastImage (8.0.0): - - React - - SDWebImage (~> 5.0) - - SDWebImageWebPCoder (~> 0.2.3) - - RNGestureHandler (1.6.0): - - React - - RNReanimated (1.7.0): - - React - - RNScreens (2.3.0): - - React - - RNVectorIcons (6.6.0): - - React - - SDWebImage (5.5.2): - - SDWebImage/Core (= 5.5.2) - - SDWebImage/Core (5.5.2) - - SDWebImageWebPCoder (0.2.5): - - libwebp (~> 1.0) - - SDWebImage/Core (~> 5.0) - - Yoga (1.14.0) - -DEPENDENCIES: - - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`) - - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) - - FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`) - - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`) - - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`) - - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`) - - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`) - - React (from `../node_modules/react-native/`) - - React-Core (from `../node_modules/react-native/`) - - React-Core/DevSupport (from `../node_modules/react-native/`) - - React-Core/RCTWebSocket (from `../node_modules/react-native/`) - - React-CoreModules (from `../node_modules/react-native/React/CoreModules`) - - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`) - - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`) - - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) - - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) - - react-native-image-picker (from `../node_modules/react-native-image-picker`) - - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) - - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) - - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) - - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) - - React-RCTImage (from `../node_modules/react-native/Libraries/Image`) - - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`) - - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`) - - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`) - - React-RCTText (from `../node_modules/react-native/Libraries/Text`) - - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) - - ReactCommon/jscallinvoker (from `../node_modules/react-native/ReactCommon`) - - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)" - - RNFastImage (from `../node_modules/react-native-fast-image`) - - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) - - RNReanimated (from `../node_modules/react-native-reanimated`) - - RNScreens (from `../node_modules/react-native-screens`) - - RNVectorIcons (from `../node_modules/react-native-vector-icons`) - - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) - -SPEC REPOS: - trunk: - - boost-for-react-native - - libwebp - - SDWebImage - - SDWebImageWebPCoder - -EXTERNAL SOURCES: - DoubleConversion: - :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" - FBLazyVector: - :path: "../node_modules/react-native/Libraries/FBLazyVector" - FBReactNativeSpec: - :path: "../node_modules/react-native/Libraries/FBReactNativeSpec" - Folly: - :podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec" - glog: - :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec" - RCTRequired: - :path: "../node_modules/react-native/Libraries/RCTRequired" - RCTTypeSafety: - :path: "../node_modules/react-native/Libraries/TypeSafety" - React: - :path: "../node_modules/react-native/" - React-Core: - :path: "../node_modules/react-native/" - React-CoreModules: - :path: "../node_modules/react-native/React/CoreModules" - React-cxxreact: - :path: "../node_modules/react-native/ReactCommon/cxxreact" - React-jsi: - :path: "../node_modules/react-native/ReactCommon/jsi" - React-jsiexecutor: - :path: "../node_modules/react-native/ReactCommon/jsiexecutor" - React-jsinspector: - :path: "../node_modules/react-native/ReactCommon/jsinspector" - react-native-image-picker: - :path: "../node_modules/react-native-image-picker" - react-native-safe-area-context: - :path: "../node_modules/react-native-safe-area-context" - React-RCTActionSheet: - :path: "../node_modules/react-native/Libraries/ActionSheetIOS" - React-RCTAnimation: - :path: "../node_modules/react-native/Libraries/NativeAnimation" - React-RCTBlob: - :path: "../node_modules/react-native/Libraries/Blob" - React-RCTImage: - :path: "../node_modules/react-native/Libraries/Image" - React-RCTLinking: - :path: "../node_modules/react-native/Libraries/LinkingIOS" - React-RCTNetwork: - :path: "../node_modules/react-native/Libraries/Network" - React-RCTSettings: - :path: "../node_modules/react-native/Libraries/Settings" - React-RCTText: - :path: "../node_modules/react-native/Libraries/Text" - React-RCTVibration: - :path: "../node_modules/react-native/Libraries/Vibration" - ReactCommon: - :path: "../node_modules/react-native/ReactCommon" - RNCMaskedView: - :path: "../node_modules/@react-native-community/masked-view" - RNFastImage: - :path: "../node_modules/react-native-fast-image" - RNGestureHandler: - :path: "../node_modules/react-native-gesture-handler" - RNReanimated: - :path: "../node_modules/react-native-reanimated" - RNScreens: - :path: "../node_modules/react-native-screens" - RNVectorIcons: - :path: "../node_modules/react-native-vector-icons" - Yoga: - :path: "../node_modules/react-native/ReactCommon/yoga" - -SPEC CHECKSUMS: - boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c - DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2 - FBLazyVector: aaeaf388755e4f29cd74acbc9e3b8da6d807c37f - FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75 - Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51 - glog: 1f3da668190260b06b429bb211bfbee5cd790c28 - libwebp: 946cb3063cea9236285f7e9a8505d806d30e07f3 - RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1 - RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320 - React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78 - React-Core: 688b451f7d616cc1134ac95295b593d1b5158a04 - React-CoreModules: d04f8494c1a328b69ec11db9d1137d667f916dcb - React-cxxreact: d0f7bcafa196ae410e5300736b424455e7fb7ba7 - React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7 - React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386 - React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0 - react-native-image-picker: 6a850c41f57f0848d918c2a77aedd7aa272ffa30 - react-native-safe-area-context: e200d4433aba6b7e60b52da5f37af11f7a0b0392 - React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76 - React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360 - React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72 - React-RCTImage: 6b8e8df449eb7c814c99a92d6b52de6fe39dea4e - React-RCTLinking: 121bb231c7503cf9094f4d8461b96a130fabf4a5 - React-RCTNetwork: fb353640aafcee84ca8b78957297bd395f065c9a - React-RCTSettings: 8db258ea2a5efee381fcf7a6d5044e2f8b68b640 - React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe - React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad - ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd - RNCMaskedView: 76c40a1d41c3e2535df09246a2b5487f04de0814 - RNFastImage: c104f15f04c4f68bd65c9645cc27900bbacd9cc7 - RNGestureHandler: dde546180bf24af0b5f737c8ad04b6f3fa51609a - RNReanimated: 031fe8d9ea93c2bd689a40f05320ef9d96f74d7f - RNScreens: 03bf608b92ac0acf323f47d8f5b63a8f829340c8 - RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4 - SDWebImage: 4d5c027c935438f341ed33dbac53ff9f479922ca - SDWebImageWebPCoder: 947093edd1349d820c40afbd9f42acb6cdecd987 - Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b - -PODFILE CHECKSUM: ba57d6260401694a7d491d5c4a4cad727c5231af - -COCOAPODS: 1.9.0 diff --git a/ios/FastImage/FFFastImageView.m b/ios/FastImage/FFFastImageView.m index 5c8732b..c5f79b4 100644 --- a/ios/FastImage/FFFastImageView.m +++ b/ios/FastImage/FFFastImageView.m @@ -1,4 +1,5 @@ #import "FFFastImageView.h" +#import @interface FFFastImageView() @@ -124,7 +125,8 @@ } { self.hasSentOnLoadStart = NO; } - UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:_source.url]]; + // Use SDWebImage API to support external format like WebP images + UIImage *image = [UIImage sd_imageWithData:[NSData dataWithContentsOfURL:_source.url]]; [self setImage:image]; if (self.onFastImageProgress) { self.onFastImageProgress(@{ @@ -142,9 +144,16 @@ } // Set headers. - [_source.headers enumerateKeysAndObjectsUsingBlock:^(NSString *key, NSString* header, BOOL *stop) { - [[SDWebImageDownloader sharedDownloader] setValue:header forHTTPHeaderField:key]; + NSDictionary *headers = _source.headers; + SDWebImageDownloaderRequestModifier *requestModifier = [SDWebImageDownloaderRequestModifier requestModifierWithBlock:^NSURLRequest * _Nullable(NSURLRequest * _Nonnull request) { + NSMutableURLRequest *mutableRequest = [request mutableCopy]; + for (NSString *header in headers) { + NSString *value = headers[header]; + [mutableRequest setValue:value forHTTPHeaderField:header]; + } + return [mutableRequest copy]; }]; + SDWebImageContext *context = @{SDWebImageContextDownloadRequestModifier : requestModifier}; // Set priority. SDWebImageOptions options = SDWebImageRetryFailed | SDWebImageHandleCookies; @@ -180,15 +189,16 @@ self.hasCompleted = NO; self.hasErrored = NO; - [self downloadImage:_source options:options]; + [self downloadImage:_source options:options context:context]; } } -- (void)downloadImage:(FFFastImageSource *) source options:(SDWebImageOptions) options { +- (void)downloadImage:(FFFastImageSource *) source options:(SDWebImageOptions) options context:(SDWebImageContext *)context { __weak typeof(self) weakSelf = self; // Always use a weak reference to self in blocks [self sd_setImageWithURL:_source.url placeholderImage:nil options:options + context:context progress:^(NSInteger receivedSize, NSInteger expectedSize, NSURL * _Nullable targetURL) { if (weakSelf.onFastImageProgress) { weakSelf.onFastImageProgress(@{