feat: add resizemode property

duguyihou · Aug 20, 2023 · 0b5addc · 0b5addc
1 parent 8f457aa
commit 0b5addc
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 23 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -3,12 +3,68 @@ import { ScrollView, StyleSheet, Text } from 'react-native';
 import TurboImage from 'react-native-turbo-image';
 
 export default function App() {
-  const image = {
-    source: {
-      uri: 'https://placedog.net/300/200?id=12',
+  const images = [
+    {
+      source: {
+        uri: 'https://placedog.net/300/200?id=1',
+      },
     },
-  };
-  const images = Array(10).fill(image);
+    {
+      source: {
+        uri: 'https://placedog.net/300/200?id=2',
+      },
+    },
+    {
+      source: {
+        uri: 'https://placedog.net/300/200?id=3',
+      },
+    },
+    {
+      source: {
+        uri: 'https://placedog.net/300/200?id=4',
+      },
+    },
+    {
+      source: {
+        uri: 'https://placedog.net/300/200?id=5',
+      },
+    },
+    {
+      source: {
+        uri: 'https://placedog.net/300/200?id=6',
+      },
+    },
+    {
+      source: {
+        uri: 'https://placedog.net/300/200?id=7',
+      },
+    },
+    {
+      source: {
+        uri: 'https://placedog.net/300/200?id=8',
+      },
+    },
+    {
+      source: {
+        uri: 'https://placedog.net/300/200?id=9',
+      },
+    },
+    {
+      source: {
+        uri: 'https://placedog.net/300/200?id=10',
+      },
+    },
+    {
+      source: {
+        uri: 'https://placedog.net/300/200?id=11',
+      },
+    },
+    {
+      source: {
+        uri: 'https://placedog.net/300/200?id=12',
+      },
+    },
+  ];
   return (
     <ScrollView
       style={styles.container}
@@ -22,7 +78,7 @@ export default function App() {
           style={styles.box}
           width={300}
           height={200}
-          // resizeMode="contain"
+          resizeMode="center"
         />
       ))}
     </ScrollView>

diff --git a/ios/TurboImage/RCTConvert+ScaleMode.swift → ios/TurboImage/RCTConvert+ResizeMode.swift b/ios/TurboImage/RCTConvert+ScaleMode.swift → ios/TurboImage/RCTConvert+ResizeMode.swift
@@ -3,7 +3,7 @@ import React
 import Kingfisher
 
 @objc
-enum ScaleMode: Int {
+enum ResizeMode: Int {
 
   /// Not scale the content.
   case none
@@ -15,15 +15,15 @@ enum ScaleMode: Int {
   case aspectFill
 }
 
-extension ScaleMode {
+extension ResizeMode {
 
-  static func mapContentMode(by scaleMode: ScaleMode) -> ContentMode {
+  static func mapContentMode(by resizeMode: ResizeMode) -> Kingfisher.ContentMode {
     var contentMode: Kingfisher.ContentMode
-    switch scaleMode.rawValue {
+    switch resizeMode.rawValue {
     case 1:
-      contentMode = .aspectFit
-    case 2:
       contentMode = .aspectFill
+    case 2:
+      contentMode = .aspectFit
     default:
       contentMode = .none
     }
@@ -33,15 +33,15 @@ extension ScaleMode {
 
 
 extension RCTConvert {
-  @objc(ScaleMode:)
-  static func scaleMode(_ value: Any) -> ScaleMode {
-    let ScaleModeMap: [String: ScaleMode] = [
+  @objc(ResizeMode:)
+  static func resizeMode(_ value: Any) -> ResizeMode {
+    let ResizeModeMap: [String: ResizeMode] = [
       "fill": .aspectFill,
       "fit": .aspectFit
     ]
 
     guard let value = value as? String,
-          let mv = ScaleModeMap[value]
+          let mv = ResizeModeMap[value]
     else { return .none }
     return mv
   }

diff --git a/ios/TurboImage/TurboImageView.swift b/ios/TurboImage/TurboImageView.swift
@@ -26,7 +26,7 @@ class TurboImageView : UIView {
     }
   }
 
-  var scaleMode: ScaleMode?
+  var resizeMode: ResizeMode?
 
   override init(frame: CGRect) {
     super.init(frame: frame)
@@ -46,8 +46,8 @@ class TurboImageView : UIView {
   }
 
   @objc
-  func setScaleMode(_ scaleMode: ScaleMode) {
-    self.scaleMode = scaleMode
+  func setResizeMode(_ resizeMode: ResizeMode) {
+    self.resizeMode = resizeMode
   }
 
   override func didSetProps(_ changedProps: [String]!) {
@@ -69,12 +69,12 @@ extension TurboImageView {
           let url = URL(string: source.uri!),
           let width = width,
           let height = height,
-          let scaleMode = scaleMode
+          let resizeMode = resizeMode
     else { return }
 
     let resource: KF.ImageResource = KF.ImageResource(downloadURL: url)
     let scale = UIScreen.main.scale
-    let contentMode = ScaleMode.mapContentMode(by: scaleMode)
+    let contentMode = ResizeMode.mapContentMode(by: resizeMode)
     let referenceSize = CGSize(width: width * scale, height: height * scale)
     let processor = ResizingImageProcessor(referenceSize: referenceSize,
                                            mode: contentMode)

diff --git a/ios/TurboImage/TurboImageViewManager.m b/ios/TurboImage/TurboImageViewManager.m
@@ -1,14 +1,13 @@
 #import <React/RCTViewManager.h>
 #import "ReactNativeTurboImage-umbrella.h"
-//#import <ReactNativeTurboImage/ReactNativeTurboImage-Swift.h>
 
 @interface RCT_EXTERN_MODULE(TurboImageViewManager, RCTViewManager)
 
 RCT_EXPORT_VIEW_PROPERTY(color, NSString)
 RCT_EXPORT_VIEW_PROPERTY(source, Source)
 RCT_EXPORT_VIEW_PROPERTY(width, double)
 RCT_EXPORT_VIEW_PROPERTY(height, double)
-RCT_EXPORT_VIEW_PROPERTY(scaleMode, ScaleMode)
+RCT_EXPORT_VIEW_PROPERTY(resizeMode, ResizeMode)
 
 @end