رسم الصور دون معرفة حجمها مسبقا React Native

عمر سالم2 · 22 مارس 2021

لدي تطبيق بصفحة رئيسية تشبه Instagram، ويجب أن يتمكن المستخدمون من نشر الصور. أريد أن تملأ الصور المنشورة من قبل المستخدمين العرض بالكامل (width)، ويتم حساب الارتفاع (height) تلقائيًا، بحيث تحافظ الصورة على نسبتها (ratio). أحاول الحصول على عرض الصورة وارتفاعها، لكنها لا تعمل. الصورة المرفقة هي 512 × 256، لذا يجب أن تملأ الصورة العرض بالكامل. وإذا كانت هناك صورة أكبر مثل 1024 × 512، فيجب أن تكون بنفس عرض الصورة الأولى، ويجب ألا تنفصل عن إطار العرض وتخرج عنه.

function Home() {
	const [images, setImages] = React.useState([]);

	React.useEffect(() => {
		getImages().then(response => {
			setImages(response.images);
		});
	}, []);

	return (
		<View>
			{
				images.map(image => (
					<Image source={{ uri: image.uri }} style={styles.image} />
				))
			}
		</View>
	);
}

تم التعديل في 22 مارس 2021 بواسطة عمر سالم2

Yomna Raouf · 22 مارس 2021

يوجد العديد من الحلول لهذه المشكلة،

استخدام الخاصية resizeMode بالقيمة contain، كما في المثال التالي:

<Image
    source={require('./local_path_to/your_image.png')}
    style={{ width: 30 }}
    resizeMode="contain"
 />

أو يمكنك استخدام مكتبة تسمى react-native-scalable-image فهي تؤدي الوظيفة التي تريدها تحديدًا:

import React from 'react';
import { Dimensions } from 'react-native';
import Image from 'react-native-scalable-image';

const image = (
   <Image
       width={Dimensions.get('window').width} // height will be calculated automatically
       source={{uri: '<image uri>'}}
   />
);

إسلام عبدالعزيز · 22 مارس 2021

إضافةً الى ما قالته المدربة يمنى، هناك حل آخر بدون استخدام مكتبات خارجية:

import * as React from 'react';
import { View, Image, Dimensions } from 'react-native';

// أولاً، سنستخدم أبعاد الشاشة لحساب نسبة العرض الى الطول
const window = Dimensions.get('window');

// هذه بعض الصور للتجربة بأحجام مختلفة
const images = [
  'https://source.unsplash.com/512x256',
  'https://source.unsplash.com/1024x512',
  'https://source.unsplash.com/2048x1024'
];

// نقوم بكتابة دالة خاصة لحساب العرض والطول
// Image.getSize
function getImageDimensions(uri) {
  return new Promise((resolve) => {
    Image.getSize(uri, (width, height) => {
      resolve([width, height]);
    });
  });
}

/**
 * مكون مخصوص لطباعة صورة واحدة، يستخدم بدلاً من Image
 */
function HomeImage({ uri }) {
  const [width, setWidth] = React.useState(0);
  const [height, setHeight] = React.useState(0);
  const [ratio, setRatio] = React.useState(0);

  React.useEffect(() => {
    getImageDimensions(uri).then(dimensions => {
      setWidth(dimensions[0]);
      setHeight(dimensions[1]);
      setRatio(window.width / width); // معادلة حساب نسبة الصورة
    });
  });

  return (
    <Image
      style={{
        width: window.width, // سيكون العرض هو نفسه عرض الشاشة
        height: height * ratio // والطول يساوي نسبة الصورة في طولها
      }}
      source={{ uri }} />
  );
}

export default function App() {
  return (
    <View>
      {
        images.map(image => (
          <HomeImage uri={image} />
        ))
      }
    </View>
  );
}

عند تشغيل التطبيق، ستظهر الصور بالشكل التالي:

رسم الصور دون معرفة حجمها مسبقا React Native

السؤال

عمر سالم2

2 أجوبة على هذا السؤال

Recommended Posts

Yomna Raouf

إسلام عبدالعزيز

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية