React Native में इसकी चौड़ाई के आधार पर छवि की ऊँचाई को स्वचालित रूप से स्केल करने के लिए घटक

React Native में, जब आपको विभिन्न मोबाइल उपकरणों के लिए एक लेआउट बनाने की आवश्यकता होती है, तो आप आमतौर पर छवियों की चौड़ाई सेट करने के लिए सापेक्ष इकाइयों का उपयोग करते हैं। हालांकि, ऊँचाई स्वचालित रूप से गणना नहीं की जाती है, जिससे लेआउट समस्याएँ हो सकती हैं।

यह सुनिश्चित करने के लिए कि छवि कंटेनर की ऊँचाई स्वयं छवि के अनुपात को बनाए रखती है, हम वेब विकास से एक दृष्टिकोण का उपयोग कर सकते हैं।

हम एक कंटेनर बनाएंगे जहाँ हम paddingTop प्रॉपर्टी को प्रतिशत में सेट करेंगे। चूंकि paddingTop मान उस तत्व की चौड़ाई के सापेक्ष गणना की जाती है जिस पर इसे सेट किया गया है, हम इस दृष्टिकोण का उपयोग कर सकते हैं।

मूल छवि के पहलू अनुपात की गणना करने के लिए, हम निम्नलिखित सूत्र का उपयोग कर सकते हैं:

const aspectRatio = height / (width / 100);

जहाँ height मूल छवि की ऊँचाई है, और width इसकी चौड़ाई है।

हम अपने कंटेनर के paddingTop को सेट करने के लिए aspectRatio मान का उपयोग करेंगे। इस तरह, कंटेनर के पास मूल छवि के समान ऊँचाई-से-चौड़ाई अनुपात होगा, जिसमें चौड़ाई और ऊँचाई के मान प्रतिशत में निर्दिष्ट किए गए हैं, जिससे इस कंटेनर को किसी भी लेआउट में एम्बेड किया जा सकता है।

इस कंटेनर के अंदर छवि रखने के लिए, हम निम्नलिखित दृष्टिकोण का उपयोग कर सकते हैं:

<View style={{ position: "relative", paddingTop: `${aspectRatio}%` }}>
  <View style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}>
    <Image source={imageSource} style={{ width: "100%", height: "100%" }} />
  </View>
</View>

यहाँ, aspectRatio वह मान है जिसे हमने पहले गणना की थी। imageSource छवि का स्रोत है।

इस तरह, छवि अपने अनुपात को बनाए रखते हुए कंटेनर की चौड़ाई के सापेक्ष अपनी ऊँचाई को स्वचालित रूप से स्केल करेगी।

यहाँ पूरा घटक कोड है:

import React from 'react';
import {Image, ImageProps, ImageResizeMode, StyleSheet, View, ViewProps} from 'react-native';

interface ScaleImageProps {
  /**
   * यदि आपको छवि की चौड़ाई प्रतिशत के रूप में और स्वचालित ऊँचाई स्केलिंग की आवश्यकता नहीं है,
   * तो शायद आपको Image घटक का उपयोग करने की आवश्यकता है
   */
  containerWidth: `${number}%` | number;
  imageWidth: number;
  imageHeight: number;
  source: ImageProps['source'];
  containerStyle?: ViewProps['style'];
  resizeMode: ImageResizeMode;
}

export const ScaleImage: React.FC<ScaleImageProps> = ({
  containerWidth,
  imageWidth,
  imageHeight,
  source,
  containerStyle,
  resizeMode
}) => {
  const paddingTop: `${number}%` = `${imageHeight / (imageWidth / 100)}%`;

  return (
    <View
      style={[
        {
          width: containerWidth,
          paddingTop,
        },
        containerStyle,
      ]}>
      <View style={styles.wrapper}>
        <Image style={styles.image} resizeMode={resizeMode} source={source} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  image: {
    width: '100%',
    height: '100%',
  },
});