عمل render ديناميكي عن طريق مسارات الصور React Native

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

الصور لا تعمل

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

class DynamicImageComponent extends React.Component {
	render() {
		return (
			<Image source={this.props.source} />
		);
	}
};

class AppComponent extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			images: [
				{ source: './src/photos/01.jpg' },
				{ source: './src/photos/02.jpg' }
			]
		};
	}

	render() {
		let images = this.state.images.map(image => {
			return <DynamicImageComponent source={image.source} />
		});
	}

	return (
		<View>
			{ images }
		</View>
	);
}

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

يجب عليك استدعاء الصور في React Native عن طريق:

سطر الـ require
باستخدام الخاصية uri بداخل source

// الطريقة الأولى
class AppComponent extends React.Component {
	constructor() {
		super();
		this.state = {
			images: [
				require('./src/photos/01.jpg'),
				require('./src/photos/02.jpg')
			]
		};
	}
}

/*** *** أو *** ***/

// الطريقة الثانية
class DynamicImageComponent extends React.Component {
	render() {
		return (
			<Image source={{ uri: this.props.source }} />
		);
	}
};

Mohammed Saber6 · 21 مارس 2021

الخطأ لديك هو في استدعاء الصور المحلية لديك طريقتين لحل المشكلة

استخدام require

this.state = {
  images: [
    { source: require('./src/photos/01.jpg') },
    { source: require('./src/photos/02.jpg') }
  ]
};

أو استخدام uri

class DynamicImageComponent extends React.Component {
	render() {
		return (
			<Image source={{ uri: this.props.source }} />
		);
	}
};

عمل render ديناميكي عن طريق مسارات الصور React Native

السؤال

عمر سالم2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

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

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mohammed Saber6

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية